0

这是我的情况。我已经将几百个小图标加载到容器中并延迟加载它们。当使用我的页面时，这个容器被清空并在用户使用程序时附加了新的图像。根据容器中图像的数量，运行延迟加载最终会减慢容器速度并使其无响应。

$('#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 ，但这似乎没有帮助。

4

2 回答 2

1

事实证明，我能够弄清楚这一点。每次运行延迟加载时，它都会运行此代码以绑定滚动侦听器

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

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

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

要在延迟加载中解决此问题，您可能需要为事件命名空间，以便以后可以引用它来解除绑定。

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

/* 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/

于 2013-07-02T17:08:41.853 回答
1

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

$("img.lazy").lazyload({
   ...
}).removeClazz("lazy");
于 2013-08-09T14:06:09.580 回答