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!");
});

此處提供了更多文檔。

Yalil演示可在此處獲得 。