jQuery 有開發網頁的應該都知道這個 js 好用的地方,他可以快速的幫助我們進行一些網頁元件的前端操作,而一個網頁內容中經常包含著文字以及圖片,當圖片較多時網頁載入的速度往往會變慢,因此我們可以利用延遲圖片載入的方式來改善這個問題,所謂的延遲載入就是指網頁開啟以後,僅載入目前...
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
這樣就整個完整安裝完成了,現在打開你的網頁應該就會有圖片延遲載入的效果
留言