jQuery LazyLoad插件降低div滚动速度

Question

这是我的情况。我把几百个小图标装进一个容器里，然后懒洋洋地贴着。当使用我的页面时，这个容器会被清空，并在用户使用程序时添加新的图像。根据容器中图像的数量，运行延迟加载最终会减慢容器的速度并使其失去响应。

$('#myul').empty();
$('#myul').append('...couple hundred lazyload images appended here...');
$("#myul img.lazy").lazyload({         
   container: $("#mydiv"),
   skip_invisible : false
});

http://jsfiddle.net/Darksbane/PaQya/

如果您单击run1，您会注意到它运行得很好。在div中滚动很顺利，似乎没有什么问题。如果你再点击run1大约20或30次，你会注意到div滚动已经到了不可用的地步。单击run100将运行它100次，并立即显示问题。

有人看到是什么导致了页面的迟缓吗。我试着调用.off所有的图像元素，然后调用.empty，但这似乎没有帮助。

Answer 1

事实证明，我能够解决这个问题。每次运行lazylod时，它都会运行此代码来绑定滚动侦听器

/* Fire one scroll event per scroll. Not one scroll event per image. */
        if (0 === settings.event.indexOf("scroll")) {
            $container.bind(settings.event, function(event) {
                return update();
            });
        }

问题是，在放置新的滚动侦听器之前，它不会解除对容器上以前放置的任何滚动侦听器的绑定。因此，如果您不想修改lazyload js文件，最简单的解决方案是在第二次调用容器上的lazylod之前，解除容器上滚动事件的绑定。如果容器上有其他滚动事件侦听器，这将导致问题，因为它会将它们全部吹走。

下面是一把小提琴，展示了先解除绑定时的差异。http://jsfiddle.net/Darksbane/2PKKn/2/

要在lazylod中修复此问题，您可能需要为事件命名名称空间，以便稍后可以引用它来解除绑定。

这是轻度测试，但我认为上面的代码可以修改为：

/* Fire one scroll event per scroll. Not one scroll event per image. */
if (0 === settings.event.indexOf("scroll")) {
$container.unbind('.lazyload');
$container.bind(settings.event+'.lazyload', function(event) {
return update();
});
}

它将解除绑定容器上的任何懒惰事件，而不绑定其他事件http://jsfiddle.net/Darksbane/KTUG4/2/

Answer 2

或者您可以确保只将插件绑定到图像一次。类似于：

$("img.lazy").lazyload({
   ...
}).removeClazz("lazy");