如何使Iscroll和延迟加载jQuery插件协同工作？

有没有可能让这两个插件一起工作？ 现在，如果我在带有图像的div中使用iscroll，Lazy-load将无法检测图像何时应该可见

谢谢

编辑：

正如在其中一条评论中所说，我曾尝试在scroll上应用lazyload，如下所示：

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

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

要正确工作，我想我必须对OnBeforeCollEnd应用相同的方法：

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会加载所有图像

这是一把小提琴：

它还有一个问题，如果第一张图像可以从beggining中查看，lazyload将不会加载该图像

编辑3:

我快拿到了，请帮帮我。 在新的小提琴中，问题是：

onBeforeScrollEnd似乎不起作用。如果我在其中包含一个console.log（'something'），那么在我看来，当滚动开始时，它正在启动

初始#容器的高度为跨度+第一个img。为了让它看起来更好，我添加了一个填充底部（不要太大），并在最后一个图像最终加载时将其删除…我还能做什么

编辑4:

这看起来更好：。onBeforeScrollEnd stills对我来说很糟糕。 我还有一个选择：哪一个适用

checkDOMChanges:true

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

解决方案： 以下是迈克尔·亚历山大·弗劳德提出的解决方案的要点。

---

它可以工作，但如果你快速“滚动”，它会卡在底部。

这可能不是最好的解决方案，但因为没有其他人回答：

试着回忆一下iscroll的onScrollEnd事件中的lazyload方法。大概是这样的：

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

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

---

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

---

干杯

谢谢你的回答。我还试图在滚动移动时回忆它，并刷新滚动条以正确适应新加载的图像高度。在scrollmove上调用此函数会影响性能吗？onScrollMove:function（）{$（“img”）.lazyload（）；$（“img”）.on（'load'，function（）{myScroll.refresh（）；}）；这太完美了，非常感谢！我还在每个图像加载完成后对iscroll添加了一个刷新，以便iscroll知道新高度。回答很棒，感谢您提交您的发现。FWIW，这也适用于jScroll（iscroll的jQuery插件）