Jquery LazyLoad.js在窗口调整大小后加载问题 [英] Jquery LazyLoad.js Issue with Loading after Window Resize

问题描述

我正在为我的网站运行LazyLoad脚本并遇到一个小问题。

Im running the LazyLoad script for my website and having an issue with one small aspect of it.

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

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).

但是我注意到如果窗口打开到较小的大小，然后打开到完整窗口，占位符，Lazy Load只加载了In View的图像在较小的窗口大小。它会在滚动条移动后加载，但我很好奇是否有任何脚本我可以沿着这些行添加'当窗口调整大小时，重新测量查看空间'

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'

希望这是有道理的。我对JavaScript知之甚少，所以如果有人知道如何解决这个问题，请随意回复，就好像你正在和一个5岁的老人一步一步说明一样：）

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 :)

推荐答案

找到这行代码（在lazyload.js中）：

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);});

并在此之后添加：

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

这篇关于Jquery LazyLoad.js在窗口调整大小后加载问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！