圖片懶加載之lazyload.js插件使用

簡介

lazyload.js用於長頁面圖片的延遲加載，視口外的圖片會在窗口滾動到它的位置時再進行加載，這是與預加載相反的。

使用

lazyload依賴與jquery。因此先引入jquery和lazyload

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

1.將圖片路徑寫入data-original屬性
2.給lazyload的圖片增長一個名爲lazy的class
3.選擇全部要lazyload的圖片（img.lazy），執行lazyload();

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">
<script>
    $(function(){
        $("img.lazy").lazyload();
    })
</script>

 

注意：必須設置圖片的高度或者寬度，不然插件可能沒法正常工做