jQuery 好用外掛 Lazy Load 延遲圖片載入

jQuery 有開發網頁的應該都知道這個 js 好用的地方，他可以快速的幫助我們進行一些網頁元件的前端操作，而一個網頁內容中經常包含著文字以及圖片，當圖片較多時網頁載入的速度往往會變慢，因此我們可以利用延遲圖片載入的方式來改善這個問題，所謂的延遲載入就是指網頁開啟以後，僅載入目前...

jQuery 有開發網頁的應該都知道這個 js 好用的地方，他可以快速的幫助我們進行一些網頁元件的前端操作，而一個網頁內容中經常包含著文字以及圖片，當圖片較多時網頁載入的速度往往會變慢，因此我們可以利用延遲圖片載入的方式來改善這個問題，所謂的延遲載入就是指網頁開啟以後，僅載入目前可視範圍內的圖片，當網頁往下滾動時，才會繼續載入之後呈現在可視範圍中的圖片。
延遲圖片載入對於網站的好處如下：

• 加快網頁載入速度，避免使用者網路塞車，也可避免因圖片過多載入造成圖片無法顯示的問題。


• 避免網站伺服器流量暴衝。

基於上述兩點的好處，就非常足夠的吸引我們使用此相關技術。

這個外掛的安裝相當的簡單

1. 首先至 Lazy Load 下載 js 檔


2. 在網頁中引入 jQuery 以及 Lazy Load
   

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



3. 設定 <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">



4. 最後在網頁插入一段 script
   

   <script>
    $(function() {
        $("img.lazy").lazyload();
    });
   </script

這樣就整個完整安裝完成了，現在打開你的網頁應該就會有圖片延遲載入的效果