jQuery 好用外掛 Lazy Load 延遲圖片載入
jQuery 有開發網頁的應該都知道這個 js 好用的地方，他可以快速的幫助我們進行一些網頁元件的前端操作，而一個網頁內容中經常包含著文字以及圖片，當圖片較多時網頁載入的速度往往會變慢，因此我們可以利用延遲圖片載入的方式來改善這個問題，所謂的延遲載入就是指網頁開啟以後，僅載入目前可視範圍內的圖片，當網頁往下滾動時，才會繼續載入之後呈現在可視範圍中的圖片。
延遲圖片載入對於網站的好處如下：
- 加快網頁載入速度，避免使用者網路塞車，也可避免因圖片過多載入造成圖片無法顯示的問題。
- 避免網站伺服器流量暴衝。
基於上述兩點的好處，就非常足夠的吸引我們使用此相關技術。
這個外掛的安裝相當的簡單
- 首先至 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
這樣就整個完整安裝完成了，現在打開你的網頁應該就會有圖片延遲載入的效果
