如何使Iscroll和Lazy Load jQuery插件协同工作？ [英] How to make Iscroll and Lazy Load jQuery plugins work together?

问题描述

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

Is there any chance of getting this two plugins to work together? Right now if I use iscroll in a div with images, Lazy load won't detect when the images should be visible.

谢谢。

编辑：

正如其中一条评论中所述，我尝试过应用lazyload像这样滚动：

As said in one of the comments, I have tried to apply lazyload on scroll like this:

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

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

To work correctly I guess I would have to apply the same to onBeforeScrollEnd:

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

但这个解决方案会影响性能（因为它会持续将lazyload应用于所有图像当它们被加载到重新加载的图像宽度/高度时刷新并刷新？
我真的很关心这里的性能，因为我将有一个容器卷轴，里面有几个（比方说是30个）滚动条，里面有图像的所有主题。
我还能做什么？

But is this solution affecting performance (as it is continuosly applying lazyload to all images and refreshing when they are loaded to readapt to the loaded image width/height)? I am really concerned about performance here as I will have a container scroller with several (let's say 30) scrollers inside all of theme with images. What else can I do?

编辑2：

这就是我到目前为止我认为效果差不多的好处：

This is what I have so far that I think works almost good:

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

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

But the problem with this solution is that when myScroll refreshes the first time, lazyload loads all the images..

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

它也有问题如果可以从开始查看第一个图像，则lazyload将不会加载该图像。 http://jsfiddle.net/U3gYS/1/

and it also has the problem that if the first image is viewable from the beggining, lazyload won't load that image. http://jsfiddle.net/U3gYS/1/

编辑3：

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

http://jsfiddle.net/pdakD/ I almost have it, please some help. In the new fiddle, the problems are:

1. onBeforeScrollEnd似乎不起作用。如果我在其中包含一个console.log（'something'），它会向我看，因为它在滚动开始时触发。

1. onBeforeScrollEnd doesn't seem to work. If I include in it a console.log('something'), it looks to me as it is firing when the scroll Starts.

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

The initial #container has a height which is the span+first img. To make it look better, I added a padding-bottom (not too big) and remove it when the last image has finally loaded...What else can I do?

编辑4：

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

This looks better: http://jsfiddle.net/pdakD/1/ .onBeforeScrollEnd stills looks bad to me. I also have this option: http://jsfiddle.net/pdakD/1/ which applies

checkDOMChanges:true

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

But as I have multiple iscrollers and ajax data, etc, I don't think is a good idea.

解决方案：
这是Michael Alexander Freund提出的解决方案的方面。
http://jsfiddle.net/pdakD/11/
它有效如果你快速滚动，就会陷入困境。

SOLUTION: Here is the jfiddle of the solution proposed by Michael Alexander Freund. http://jsfiddle.net/pdakD/11/ It works but gets stuck in the bottom if you "scroll" fast.

推荐答案

今天我遇到了同样的问题，我发现了滚动事件未被触发，lazyload正在侦听。因此，您唯一需要做的就是手动触发滚动容器的滚动事件。我使用来自iScroll的 onScrollEnd 回调并做了一个

Today i had the same issue and i figured out that the scroll event is not triggered, which lazyload is listening to. So the only thing you have to do, is triggering the scroll event for your scroll container manually. I used the onScrollEnd callback from iScroll and did a

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

而 $（'div.scroll'）是我用于iScroll的容器

while $('div.scroll') is the container i used with iScroll

var scroll, container;

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

这是lazyload方法的样子

and this is what the lazyload method looks like

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

干杯！

这篇关于如何使Iscroll和Lazy Load jQuery插件协同工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！