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。

jQuery懒加载图像

1 个答案: