延遲圖片載入對於網站的好處如下:
- 加快網頁載入速度,避免使用者網路塞車,也可避免因圖片過多載入造成圖片無法顯示的問題。
- 避免網站伺服器流量暴衝。
基於上述兩點的好處,就非常足夠的吸引我們使用此相關技術。
這個外掛的安裝相當的簡單
- 首先至 Lazy Load 下載 js 檔
- 在網頁中引入 jQuery 以及 Lazy Load
<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script>
- 設定 <img>標籤,將原本的 src 屬性改用為 data-original,並且要設定寬度與高度,在 class 屬性加入 lazy
//一般 <img src="img/example.jpg" width="640" height="480"> //Lazy Load <img class="lazy" data-original="img/example.jpg" width="640" height="480">
- 最後在網頁插入一段 script
<script> $(function() { $("img.lazy").lazyload(); }); </script
這樣就整個完整安裝完成了,現在打開你的網頁應該就會有圖片延遲載入的效果