如何使Iscroll和Lazy Load jQuery插件协同工作?

有没有机会让这两个插件一起工作? 现在,如果我在带有图像的div中使用iscroll,则Lazy load将无法检测图像何时应该可见。

谢谢。

编辑:

正如其中一条评论中所述,我试图在滚动上应用lazyload,如下所示:

onScrollMove: function () { $("img").lazyload(); $('img').on('load',function(){myScroll.refresh();}); } 

为了正常工作,我想我必须将相同的内容应用于onBeforeScrollEnd:

 onBeforeScrollEnd: function () { $("img").lazyload(); $('img').on('load',function(){myScroll.refresh();}); } 

但是这个解决方案是否会影响性能(因为它会继续将lazyload应用于所有图像并在加载到重新加载图像宽度/高度时刷新)? 我真的很关心这里的性能,因为我将有一个带有几个(比方说30个)滚动条的容器卷轴,里面有所有主题和图像。 我还可以做些什么?

编辑2:

这是我到目前为止所做的工作,我认为它的效果非常好:

 onScrollMove: function() { $('#my_container img').lazyload({ container: $('#my_container'), threshold: 200 }).on('load', function() { myScroll.refresh(); });​ } 

但是这个解决方案的问题是当myScroll第一次刷新时,lazyload会加载所有图像。

这是一个小提琴: http : //jsfiddle.net/U3gYS/

并且还存在如下问题:如果第一个图像可以从开始查看,则lazyload将不会加载该图像。 http://jsfiddle.net/U3gYS/1/

编辑3:

http://jsfiddle.net/pdakD/我几乎拥有它,请一些帮助。 在新的小提琴中,问题是:

  1. onBeforeScrollEnd似乎不起作用。 如果我在其中包含一个console.log(’something’),它会向我看,因为当滚动开始时它正在触发。

  2. 最初的#container的高度是span + first img。 为了让它看起来更好,我添加了一个填充底部(不是太大)并在最后一个图像最终加载时将其删除…我还能做什么?

编辑4:

这看起来更好: http : //jsfiddle.net/pdakD/1/ .onBeforeScrollEnd看起来很糟糕。 我也有这个选项: http : //jsfiddle.net/pdakD/1/适用

 checkDOMChanges:true 

但由于我有多个iscrollers和ajax数据等,我认为这不是一个好主意。

解决方案:这是Michael Alexander Freund提出的解决方案的方面。 http://jsfiddle.net/pdakD/11/如果你快速“滚动”,它会工作但会卡在底部。

今天我有同样的问题,我发现滚动事件没有被触发,lazyload正在监听。 因此,您唯一需要做的就是手动触发滚动容器的滚动事件。 我使用onScrollEnd回调并做了一个

 onScrollEnd: function () { $('div.scroll').trigger('scroll'); } 

$('div.scroll')是我用于iScroll的容器

 var scroll, container; container = $('div.scroll'); scroll = new iScroll(container.get(0), { bounce: false, onScrollEnd: function () { container.trigger('scroll'); } }); 

这就是lazyload方法的样子

 $('img.lazyload').lazyload({ effect: 'fadeIn', container: $('div.scroll') }); 

干杯!

这可能不是最佳解决方案,但由于没有其他人回答:

尝试在iscroll的onScrollEnd事件中调用lazyload方法。 像这样的东西:

  new iScroll('wrapper', onScrollEnd: function() {$("img.lazy").lazyload()});