3

有没有机会让这两个插件一起工作？现在，如果我在带有图像的 div 中使用 iscroll，则延迟加载不会检测到图像何时应该可见。

谢谢。

编辑：

正如其中一条评论所说，我试图在滚动上应用延迟加载，如下所示：

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

为了正常工作，我想我必须将同样的方法应用于 onBeforeScrollEnd：

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

但是这个解决方案是否会影响性能（因为它不断地将延迟加载应用于所有图像并在加载它们以重新适应加载的图像宽度/高度时刷新）？我真的很关心这里的性能，因为我将在所有带有图像的主题中拥有一个带有几个（比如说 30 个）滚动条的容器滚动条。我还可以做些什么？

编辑2：

这是我迄今为止所拥有的，我认为效果几乎很好：

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

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

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

而且它还有一个问题，如果从一开始就可以看到第一张图像，那么延迟加载将不会加载该图像。http://jsfiddle.net/U3gYS/1/

编辑 3：

http://jsfiddle.net/pdakD/我差不多有了，请帮忙。在新的小提琴中，问题是：

  1. onBeforeScrollEnd 似乎不起作用。如果我在其中包含一个 console.log('something')，它在我看来就像滚动开始时正在触发一样。

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

编辑4：

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

checkDOMChanges:true

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

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

4

2 回答 2

6

今天我遇到了同样的问题，我发现滚动事件没有被触发，这是延迟加载正在监听的。因此，您唯一需要做的就是手动触发滚动容器的滚动事件。我使用了onScrollEndiScroll 的回调并做了一个

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

while$('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')
});

干杯!

于 2012-12-28T08:52:34.623 回答
0

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

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

 new iScroll('wrapper', onScrollEnd: function() {$("img.lazy").lazyload()});
于 2012-08-20T22:25:24.350 回答