在網頁端使用圖片延遲載入-tuupola/jquery_lazyload

在網頁端使用圖片延遲載入-tuupola/jquery_lazyload

在網頁端使用圖片延遲載入-tuupola/jquery_lazyload

介紹

一般我們在瀏覽網頁時,為了避免一次性的載入過多的畫面/圖片,我們會使用Lazy-loading的功能 – 當頁面滑到(scroll)時才載入當前的畫面,一方面可以降低用戶端的網路流量,另一方面可以在使用者進入到頁面時的Loading更為快速(下載量從整個頁面減少至僅當前頁面),目前許多電商平台都會用這種方式來提供更好的使用者體驗。

而使用方法也相當簡單,網路上以Lazy loading當關鍵字 也可以搜尋到許多的套件(不過你也可能會搜尋到跟資料庫相關的Lazy Loading),而且實作的方法也相當多,以下舉兩個簡單例子:

  1. Server端送API時包含全部的資料,是否要顯示由前端控制。

  2. Server端送API前把資料分頁,一開始只送第一個分頁的資訊,其他分頁的載入由前端控制。

第二個處理方式會稍微複雜一點,這邊簡單的介紹第一種處理方式。

傳統的作法是會去監聽scroll事件後掉用目標元素的getBoundingClientRect()方法,利用座標的方式去處理畫面要不要呈現。但是scroll事件是只要滑動就會不斷監聽,計算會相當頻繁,容易造成效能問題。比較新的解決方法是透過IntersectionObserver API去觀察目標元素有無出現。而筆者採用的套件為 – tuupola/jquery_lazyload其實作是採用IntersectionObserver API的方式。

使用

首先我們先下載套件。

//use npm
npm install lazyload
//or use yarn
yarn add lazyload

如果有切分JS,記得把套件引入

require('lazyload');

Vanilla JS

接者你可以直接用vanilla Js的方式調用,在預設情況下,套件會把data-src的內容視為高解析度的圖片,而src內則是低解低度的圖片。

<img class="lazyload" data-src="img/example.jpg" width="765" height="574" />
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574" />

接者如果你要把全部的圖片都使用Lazy Loading時你可以直接調用lazyload()

lazyload()

或是當你有指定的圖片class才需要調用時

//html
<img class="lazyload" ...>
<img class=""...>
//js
let images = document.querySelectorAll(".lazy");
lazyload(images); 

jQuery Wrapper

如果你要用Jquery 的方式,只需要修正圖片url為data-original 即可。

<img class="lazyload" data-original="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">

接者一樣使用lazyload()

$("img.lazyload").lazyload();

如果你像筆者一樣是透過AJAX的方式去向後端取資料,記得要注意異步的問題。

$.get('YOUR_GET_DATA_URL', function (data)){
    //calculate the data here...
    //lazyload
    $("img.lazyload").lazyload();
})