0

I have made a photo gallery system where upon a button click the thumbnails of the gallery are loaded from a folder via an ajaxFunction call. You click thumbs and the full image size version opens. Pretty common setup.

The average size of my thumbnails is about 57k. Maximum thumbs in a gallery about 100. All thumbnails are 250px x 250px

My server is relatively very quick and the thumbnails load really fast but... randomly, a handful of thumbs will show half displayed (cut off in height). It is not the same images every time. It's very random. Sometimes it doesn't happen at all but usually some get cut off like that. It is almost as if it loaded too fast or something and things aren't getting finalized.

There really is no css on the thumbnails themselves. Just some padding.

Not sure if:

This is a css issue (perhaps height or other style needs to be defined)?

or

This is an ajax issue and the code needs to be edited to not display until they are fully loaded. (which I am not sure how to do)?

This is a portion of my js file that loads the images.

$( document ).ready(function() {
ajaxFunction = function(gallery) {
  $.ajax({
      cache: false,
    url : gallery.thumbs,
    success: function (data) {
      $(data).find("a").attr("href", function (i, val) {
        if( val.match(/\.(JPG|jpe?g|png|gif)$/) ) {
            $("#griddie").append( "<a class='item' href='"+ gallery.full + val +"'><img class='squares' src='"+ gallery.thumbs + val +"'></a>" );
          }
      });
    }
  });
};
$.getScript("links.js");
$(document).ajaxComplete(function(){
$("#lightgallery").lightGallery({
        selector: '.item',
        speed: 180,
        cssEasing: 'cubic-bezier(0.000, 0.000, 0.580, 1.000)',
        hideBarsDelay: 1800
});
});
});

I am not the greatest with jQuery but am learning and have looked up this issue in advance but can't find a topic relevant enough. Any suggestions? Has anyone experienced this when calling thumbnails via an ajaxFunction?

Thanks

DC1
  • 371
  • 1
  • 4
  • 15
  • Just to be sure, the half image shows for a long time right, not just a few seconds ? – Neil Sep 18 '18 at 19:16
  • Hi Neil, they stay like that. The function is completed and they never fill in completely. Oddly though, the whole square area, even the unloaded part of the image is clickable and open the full size image. Ajax considers the job complete but these random images get chopped off in height. And it is never the same amount chopped off. Sometime half, sometimes more or less. – DC1 Sep 18 '18 at 21:09
  • this seems hard to resolve without being able to reproduce, but you could open the "network" tab in you debug window (at least in chrome and FF) and see what happens to your images requests – Neil Sep 18 '18 at 21:54

0 Answers0