Question

有没有机会让这两个插件一起工作？现在，如果我在带有图像的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/我几乎拥有它，请一些帮助。在新的小提琴中，问题是：

onBeforeScrollEnd似乎不起作用。如果我在其中包含一个console.log（'something'），它会向我看，因为它在滚动开始时触发。
最初的#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/ 如果你“快速滚动”，它可以工作，但卡在底部。

Answer 1

今天我有同样的问题，我发现滚动事件没有被触发，lazyload正在侦听。因此，您唯一需要做的就是手动触发滚动容器的滚动事件。我使用了来自iScroll的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')
});

干杯！

Answer 2

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

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

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

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

2 个答案: