jquery – 我应该总是使用.off(‘load’);?

2023年5月25日 240次阅读

在有很多图像的组合网站上,我检查客户端加载时间是什么,然后提供小图像或大图像.但是在加载了较小的图像集之后,我想将它们换成更大的图像.

我为此使用了.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="" />

最佳答案 由于持续触发加载事件,因此不断调用您的函数.当您更改图像的src属性时,浏览器将加载新的源数据;完成后,该元素上的新加载事件将触发事件监听器,与之前相同.

可以在函数末尾使用.off()来确保它只运行一次.使用
.one()可以获得相同的行为.

点赞