好用的jQuery圖片延遲讀取套件Lazy Load

分享一個好用的jQuery圖片延遲讀取套件Lazy Load ,這個套件主要功能是讓user進入網站時圖片能夠延遲讀取(淡入),也就是當瀏覽器捲軸捲到圖片上方時圖片才出現,像yahoo新聞中的圖片就有使用這樣的效果,或是像以下網站的商品展示區塊圖片會延遲出現一樣的效果。

日本藥王-健康日本 http://healthjp99.com/


可以加快網站的開啟速度,不用一開始就讀取全部的圖檔,也能增加seo優化,

以下為建置Lazy Load 套教的方法教學。

1、先去Lazy Load網站下載 jquery.lazyload.js檔

https://plugins.jquery.com/lazyload/


2、於檔頭引入 jquery.lazyload.js檔

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

如網站已有引入jquery.js則不需要再引入一次,如果沒有則須放在 jquery.lazyload.js的前面

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

3、修改圖片標籤

<img class="lazy" data-original="img/example.jpg">

4、於頁腳增加以下的js程式碼

<script>
$("img.lazy").lazyload({
effect : "fadeIn"
});
</script>

完成套件建置後,清除瀏覽器暫存就能看到圖片的延遲讀取效果了,Lazy Load 官網還有許多效果的應用範例,有興趣的朋友可以前往參考。



教學撰寫:徐嘉裕 Neil hsu

留言

這個網誌中的熱門文章

Xoops免費佈景:neilambilight2.5正式版釋出-佈景設計開發:徐嘉裕Neil hsu

Xoops免費佈景:neilambilight2.4正式版釋出-佈景設計開發:徐嘉裕 Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu