Jquery LazyLoad.js 窗口大小调整后加载问题

Question

我正在为我的网站运行 LazyLoad 脚本，但其中的一个小方面存在问题。

我在水平滚动（从左到右）上使用延迟加载，图像相当宽。该脚本运行完美，并在 200 像素（或任何默认值）内淡入。

但是我注意到，如果窗口打开到较小的尺寸，然后打开到整个窗口，则占位符“延迟加载”仅加载在较小的窗口尺寸期间“在视图中”的图像。一旦滚动条移动，它就会加载，但我很好奇是否有任何脚本可以添加“当窗口大小调整时，重新测量观看空间”

希望这是有道理的。我对 JavaScript 知之甚少，所以如果有人知道如何解决这个问题，请随时回复，就好像您正在与 5 岁的孩子交谈一样，并提供逐步说明:)

Answer 1

找到这行代码（在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);});

并在其后添加：

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

Answer 2

将 failure_limit 设置为 10 会导致插件在找到首屏下的 10 个图像后停止搜索要加载的图像。如果您有一个时髦的布局，请将此数字设置为较高的值以解决您的问题，例如：

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