Question

在一个包含大量图片的个人网站上，我会查看客户端的加载时间，然后提供小图像或大图像。但是在加载了较小的图像集之后，我想将它们换成更大的图像。

我为此使用了.on（'load'）处理程序，但在测试页面时，我发现它一直在触发。我通过在末尾添加.off（'load'）处理程序来修复它。

$(this).on('load', function() {
  $(this).attr('src', $(this).data('src')).off('load');
  console.log('full size img are loading');
}).attr('src', srcNew);

所以我的问题是：

在网上的所有代码片段中，我从未发现使用过.off（'load'）处理程序。这是正常行为吗？

这个函数在循环中可能很重要吗？这是完整的功能：

var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 

$(document).ready(function() {
    $.fn.lazyLoad = function(){ 
        if($(this).is('img[data-src]')) {
            var lazy = $(this);
        } else {
            var lazy = $(this).find('img[data-src]');
        };
        $(lazy).each(function(){
            if (loadTime > 1000) {
                var src = $(this).data('src');
                var srcPath = src.slice(0, -4);
                var srcExt =    src.slice(-4);
                var srcNew = srcPath + '_s' + srcExt;
                $(this).on('load', function() {
                    $(this).attr('src', $(this).data('src')).off('load');
                    console.log('full size img have been loaded');
                }).attr('src', srcNew);
                console.log('_s img have been loaded');
            } else {
                $(this).attr('src', $(this).data('src'));
            }
        });
    };
    $('.lazy').lazyLoad();
    $('.slide').click(function() {
        $(this).lazyLoad();
    });
});

这里是HTML：

<img data-src="img/photo.jpg" src="img/photo_s.jpg" alt="" />

Answer 1

由于load事件一直被触发，因此不断调用您的函数。当您更改图像的src属性时，浏览器将加载新的源数据;完成后，该元素上的新load事件将启动事件侦听器，与之前相同。可以在函数末尾使用.off()来确保它只运行一次。使用.one()可以获得相同的行为。

我应该总是使用.off（'load'）;?

1 个答案: