Im running the LazyLoad script for my website and having an issue with one small aspect of it.
Im using Lazy Load on a Horizontal scroll (left to right) with fairly wide images. The script works perfectly and fades in within 200px (or whatever the default is).
However I noticed if the window is opened to a smaller size, then opened to full window, the placeholder, Lazy Load has only the image loaded that was "In View" during the smaller window size. It loads once the scroll bar is moved, but Im curious if there's any scripting I could add along the lines 'When the window resizes, re-gauge the viewing space'
Hopefully this makes sense. I know very little about JavaScript so if anyone knows how to solve this feel free to respond as if you were talking to a 5 year old with step by step instructions :)
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 add after that this:
$(window).bind("resize",function(event){$(settings.container).trigger('scroll');});
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 to solve your problem, an example:
$('img').lazyload({effect:'fadeIn', failure_limit:40});
