Question

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

在我添加到最后一个if语句之前，这一切都有效：

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

加载每张图片后的类突变：

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

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

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

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

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 属性并且尚未加载（因此具有类＆＃39; .lazyLoaded＆＃39; ，然后将它们传递给 var lazy 数组。

所以我仍然在加载大图片时添加＆＃39; .lazyLoaded＆＃39; 类

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

在功能开始时我添加了 .not（＆＃39; .lazyLoaded＆＃39;）

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();

延迟加载功能坏了

1 个答案: