JQuery LazyLoad.js error loading after window change

Question

Im working with a LazyLoad script for my site and has a problem with one small aspect.

Im using Lazy Load on a horizontal scroll bar (left to right) with fairly wide images. The script works fine and disappears within 200px (or whatever the default is).

However, I noticed that if the window opens to a smaller size and then opens to a full window, then the placeholder, Lazy Load has only the loaded image, which was "In View" during the smaller window size. It loads when the scrollbar moves, but I'm curious if there are any scenarios that I could add along the lines of “When the window resizes, resize the viewport”

Hope this makes sense. I know very little about JavaScript, so if anyone knows how to solve this problem, do not hesitate to respond as if you were talking with a 5-year step-by-step instructions :)

Answer 1

Find this line of code (inside lazyload.js):

$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});

and then add the following:

$(window).bind("resize",function(event){$(settings.container).trigger('scroll');});

Answer 2

Setting the fail_limit parameter to 10 causes the plugin to stop searching for images loaded after 10 images are located under the bend. If you have a funky layout, set this number to something high to solve your problem, for example:

$('img').lazyload({effect:'fadeIn', failure_limit:40});