利用lazyload.js實現圖片延遲加載加快網站瀏覽速度

分享至

lazyload 超讚的,網頁生成後一開始只會載入畫面區域內的圖片,由於不需要載入其他目前還沒看到的圖片,所以加快了網頁生成的速度,不會發生一開網頁就load很久,或著一開網頁就缺這缺那的畫面發生;非常適合用在一個頁面有很多圖片的網頁上。

lazyload使用方式:

<body>

//針對要進行延遲加載的img標籤代入 class="lazyload" 並且將data-src="這邊代入要加載的圖片路徑" (當滑鼠滾動到這張圖片時就會加載data-src="裡面的圖片進來囉")

<img class="lazyload" src="loading的gif檔路徑" data-src="要加載的圖片路徑" />

<script type="text/javascript">
$(function(){ 
   $("img.lazyload").lazyload();
});
</script>
</body>

展示影片:

至於免費的loading動畫製作則可以到這個網站→https://loading.io/asset/445230 來客製,非常方便。

趕快來安裝看看吧~

發表迴響