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

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

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




上一篇文章
下一篇文章

歡迎來到茂銓的網路記事本,這邊主要記錄著個人的一些體驗以及心得分享。

0 意見: