In case of JQuery AJAX, Images that are visible on the page don't load until I scroll a bit

[anujkrathi]

First of all, thanks for this wonderful plugin.

It works fine if I put the all the image in my page. But If I Load the data (images) using JQuery AJAX, then it doesn't show the original image (data-original path) which are visible in the view port. It shows the "gray.gif" image. But If I slightly move the scroll bar, it show actual image (data-original). Below is the code which I am using:
On First page load:
$("img.lazy").lazyload({effect: "fadeIn", threshold: 200 });

in first page load, I am showing approx 30 images & I have paging buttons. when user
press the next button I load the data using JQuery AJAX. After loading & binding the
data, I again call the lazyload method.
var jxhr = $.ajax({
// required options
}).done(function (data) {
// code to bind data
$("img.lazy").lazyload({effect: "fadeIn", threshold: 200 });
});

& after loading the data via ajax, there are approx 10 images which are visible in view port.
But plugin doesn't show the actual images of these visible images. If I move scroll bar a bit, It loads these images.

Please suggest me what should I do?

[Brandon0]

I use the following snippet.

$(document).ajaxComplete(function(evt){
    $(window).trigger('resize'); //trigging the window resize event forces $.lazyload to look for new images to load
});

[anujkrathi]

Thanks Brandon,
I will also try this snippet.

Currently, I am calling $.lazyload() again after loading data via AJAX. But in this case, It loads the already loaded images again & when we scroll the page, there is a bit flickering when I view already loaded images.

I hope, your snippet will solve my problem.

[chrisbloom7]

@Brandon0: Thanks for your workaround. I noticed that adding it to the ajaxComplete event may not work when using a fade in/out or similar effect to show the rendered AJAX output. In that case, you can add the resize trigger to the callback function of your effect instead.

$('#results_list').children().hide('slow', function() {
  $('#results_list').html(results);
  // ... any other post processing
  $("#results_list img.lazy").lazyload();
  $(window).trigger('resize'); //trigging the window resize event forces $.lazyload to look for new images to load
});

[tuupola]

This should be fixed in 1.8.5. Can you try with the latest and reopen the issue if problems still exist. There is also an AJAX(H) demopage.

[veryrobert]

Hey guys, just a heads up that this problem seems to persist if you are using the failure_limit show an initial image that is not in the order of the html. $(window).trigger('resize'); also solves this problem.

Just a heads up incase anyone else come across this.

[tuupola]

After scrolling and in initial pageload plugin loops though unloaded images. Loop checks if image has become visible. By default loop is stopped when first image outside viewport is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong. You can control loading behaviour with failure_limit setting.

$("img.lazy").lazyload({
    failure_limit : 10
});

Setting failure_limit to 10 causes plugin to stop searching for images to load after finding 10 images below the fold. If you have a funky layout set this number to something high. Worst case being the actual number of images.

If I understood correctly your initial image is somewhere far away in the DOM. Just increase the amount of failure_limit until it loads. Alternatively move the initial image in the beginning of DOM.

[veryrobert]

Didn't think of increasing my initial failure_limit

Thanks for this!