javascript - 延迟加载功能坏了

Question

我有这个延迟加载功能。在执行时，它首先加载图像的小版本，然后加载完整版本。我需要它在开始加载真正的大图像之前快速为用户提供工作幻灯片。

在我添加最后一个 if 语句之前一切正常:

if (!$(this).hasClass('lazyLoaded'))

加载每张图片后类的变化:

$(this).addClass('lazyLoaded');

我想检查图像之前是否加载过。我需要这个，因为否则在下一次执行时，脚本会用较小的图像替换完整尺寸的图像，然后重新加载大图像。

当我添加这个额外的 if 语句和 2 个 .addClass 操作时，脚本停止工作。我不知道为什么，你能帮帮我吗？

我还注意到一个奇怪的副作用是图像长度的计数太长了 1。

html:

<img src="img/3x2.gif" data-src="img/photo/event.jpg" alt="" />
<img src="img/3x2.gif" data-src="img/photo/wedding.jpg" alt="" />
<img src="img/3x2.gif" data-src="img/photo/portrait.jpg" alt="" />

jQuery:

     $.fn.lazyLoad = function(){
        if($(this).is('img[data-src]')) {
            var lazy = $(this);
        } else {
            var lazy = $(this).find('img[data-src]');
        };
        var lazyLength = $(lazy).length;
        console.log('lazyLength = ' + lazyLength);
        var lazyNumber = 0
        $(lazy).each(function(){
            if (!$(this).hasClass('lazyLoaded')) {
                if (loadTime > 300) {
                    var src = $(this).data('src');
                    var srcPath = src.slice(0, -4);
                    var srcExt =    src.slice(-4);
                    var srcNew = srcPath + '_s' + srcExt;
                    $(this).one('load', function(){
                        lazyNumber++;
                        console.log('lazyNumber = ' + lazyNumber);                      
                        if (lazyNumber >= lazyLength) {
                            console.log('all small images have been loaded');
                            console.log('setting Timeout for 500ms');
                            setTimeout(function() {
                                console.log('beginning loading of large images...');
                                $(lazy).each(function(){
                                    $(this).one('load', function(){
                                        console.log('large images loaded');
                                        $(this).addClass('lazyLoaded');
                                    }).attr('src', $(this).data('src'));
                                });
                            }, 500);
                        };
                    }).attr('src', srcNew);
                    console.log('small image loaded');
                } else {
                    $(this).one('load', function(){
                        $(this).addClass('lazyLoaded');
                        console.log('large images loaded immediately');
                    }).attr('src', $(this).data('src'));
                };
            };
        });
    };

Answer 1

我认为错误是通过在 .each 循环中添加 if 语句造成的。仔细想想，这也不是最有效的方法。

我只需要测试图像是否具有 data-src 属性并且尚未加载(因此在传递它们之前具有类 '.lazyLoaded'到 var lazy 数组。

所以我仍然在加载大图像时添加'.lazyLoaded'类

$(this).one('load', function(){
  console.log('large images loaded');
  $(this).addClass('lazyLoaded');
}).attr('src', $(this).data('src'));

在函数的开头我添加了.not('.lazyLoaded')

if($(this).is('img[data-src]')) {
  var lazy = $(this).not('.lazyLoaded');
} else {
  var lazy = $(this).find('img[data-src]').not('.lazyLoaded');
};

只是发布整个工作代码，也许它对有类似问题的人有用:

$.fn.lazyLoad = function(){
    if($(this).is('img[data-src]')) {
        var lazy = $(this).not('.lazyLoaded');
    } else {
        var lazy = $(this).find('img[data-src]').not('.lazyLoaded');
    };
    var lazyLength = $(lazy).length;
    console.log('lazyLength = ' + lazyLength);
    var lazyNumber = 0
    console.log('lazyNumber = ' + lazyNumber);
    $(lazy).each(function(){
            if (loadTime > 300) {
                var src = $(this).data('src');
                var srcPath = src.slice(0, -4);
                var srcExt = src.slice(-4);
                var srcNew = srcPath + '_s' + srcExt;
                $(this).one('load', function(){
                    lazyNumber++;
                    console.log('lazyNumber = ' + lazyNumber);                      
                    if (lazyNumber >= lazyLength) {
                        console.log('all small images have been loaded');
                        console.log('setting Timeout for 500ms');
                        setTimeout(function() {
                            console.log('beginning loading of large imags...');
                            $(lazy).each(function(){
                                $(this).one('load', function(){
                                    console.log('large images loaded');
                                    $(this).addClass('lazyLoaded');
                                }).attr('src', $(this).data('src'));
                            });
                        }, 500);
                    };
                }).attr('src', srcNew);
                console.log('small image loaded');
            } else {
                $(this).one('load', function(){
                    console.log('large images loaded immediately');
                    $(this).addClass('lazyLoaded');
                }).attr('src', $(this).data('src'));
            };
    });
};
$('.lazy').lazyLoad();