好用的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"  src="img/example-thumb.jpg"   data-original="img/example.jpg">

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

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

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

Lazy Load 網站

http://appelsiini.net/projects/lazyload/

教學撰寫：徐嘉裕 Neil hsu