jQuery懒加载图像

Question

我尝试使用jQuery延迟加载图像，但似乎没有正常工作，有时即使有图像我也会得到占位符

   $(window).on('load', function() {
        var defaultImage = $('.lazy-load').each(function(){
            if($(this).get(0).naturalWidth < 2 ) {
                $(this).addClass('image-placeholder');
                $(this).attr('src', 'no-image.jpg')
            }
        })
    });

我错过了什么？

Answer 1

由于你已经在使用jQuery，我建议你使用一个名为Ya-L'il的小插件。

免责声明：我是这个jQuery插件的作者。

将图像设置为最初不在css中显示，例如

.lazy-load{
    display:none;
}

加载Ya-L'il插件，例如

<script src="jquery.yalil.js"></script>

现在，对于Javascript，您可以在文档就绪时调用插件（这就是为什么最初显示图像很重要。否则图像可能会在调用yalil之前开始加载）：

$(document).ready(function(){
    $('body').yalil({
         selector: '.lazy-load',
         //loadingImage : "preloading_image_url",
     });
    $('.lazy-load').show();
});

或者，如果您需要在加载所有图像后运行其他代码，您可以这样做：

$(document).on('imagesLoaded', function(){
    console.log("All images have been loaded!");
});

更多文档可用here。

Yalil演示可用here。