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次并立即显示问题。

有没有人看到可能导致页面缓慢的原因。我在调用.empty之前尝试在所有图像元素上调用.off，但这似乎没有帮助。

Answer 1

原来我能够把这个想出来了。每次运行lazyload时，它都会运行此代码来绑定滚动侦听器

/* 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文件，最简单的解决方案是在第二次调用lazyload之前取消绑定容器上的scroll事件。如果您在容器上有其他滚动事件侦听器，这将导致问题，因为它会将它们全部吹走。

下面是一个小提示，显示首先取消绑定时的区别。 http://jsfiddle.net/Darksbane/2PKKn/2/

要在lazyload中修复此问题，您可能需要对事件命名空间，以便您可以引用它以便以后取消绑定它。

这是经过温和测试的，但我认为以上代码可以修改为：

/* 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();
});
}

将解除容器上任何lazyload事件的绑定，只留下其他事件 http://jsfiddle.net/Darksbane/KTUG4/2/

Answer 2

或者您可以确保仅将插件绑定到图像一次。类似的东西：

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

jQuery LazyLoad插件减慢div滚动速度

2 个答案: