當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

利用Jquery Lazyload JS插件实现网页图片延迟加载

發布時間：2023/12/29 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了利用Jquery Lazyload JS插件实现网页图片延迟加载小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Jquery Lazyload是一款網頁圖片延遲加載JS插件，本文介紹該JS的使用方法。

最新的jquery lazyload可以單獨使用（即不依賴jquery），本文介紹的是依賴jquery的使用及配置方法。

Github項目地址：https://github.com/tuupola/lazyload

本文使用的是1.9.7版本（實際與1.9.6版本一致）

首先需要引用jquery，如：??https://libs.afengim.com/libs/jquery-3.5.1/jquery-3.5.1-min.js??

之后引用??jquery.lazyload.js??及??jquery.scrollstop.js??

1.實例代碼

<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>Jquery lazyload</title><script src="https://libs.afengim.com/libs/jquery-3.5.1/jquery-3.5.1-min.js" type="application/javascript"></script><script src="https://libs.afengim.com/libs/lazyload-1.9.7/jquery.lazyload.min.js"type="application/javascript"></script><script src="https://libs.afengim.com/libs/lazyload-1.9.7/jquery.scrollstop.min.js"type="application/javascript"></script><style>img {max-width: 100%;height: 100%;object-fit: cover;}</style> </head> <body> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/1.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/2.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/3.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/4.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/5.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/6.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/7.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/8.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/9.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/10.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/11.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/12.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/13.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/14.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/15.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/16.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/17.webp" height="574"width="765"/> <img class="lazy" data-original="https://tools.afengim.com/demo/jquery-lazyload/images/18.webp" height="574"width="765"/> <script type="text/javascript">$(function () {$("img.lazy").lazyload({effect: "fadeIn",});}); </script> </body> </html>

打開網頁后只加載當前屏幕內的圖片，只有滾動或下拉瀏覽器才會加載底部的圖片

2.初始化屬性

使用jquery lazyload需要進行初始化才能生效延遲加載效果。

初始化代碼：

可以通過不定義??.lazy樣式??實現不帶??class="lazy"??即可初始化，會對該頁面的全部img標簽生效

全局初始化代碼如下：

$("img").lazyload({effect: "fadeIn"});

可以在初始化代碼??$("img.lazy").lazyload({??后添加屬性，以實現更多效果，每個屬性以,結尾

需要為img標簽添加lazy樣式（lazy可以在初始化定義值），如：??$("img.afengblog").lazyload??

示例：??<img class="afengblog" data-original="test.png"/>??

圖片路徑引用方法默認使用??data-original??，也可以在初始化定義data-后的值。

如：??data_attribute : "afengblog",??

示例：??<img class="afengblog" data-afengblog="test.png"/>??

以下介紹基礎的使用屬性：

??threshold??屬性可以提前加載圖片，可以自定義高度，如：??200??，則提前200高度加載圖片。

??effect??屬性可以定義載入效果，一般為：??fadeIn??（漸入效果）。

??placeholder??屬性可以設置全局圖像占位符，如：??data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=?? 此處也可以設置http地址圖片或者base64圖片，實現替換默認的加載圖片。

??effectspeed??屬性可以設置動畫持續時長, 單位毫秒，如：??1000??（動畫持續1000ms）

3.可用的初始化屬性

$('img.lazy').lazyload({// threshold: 提前開始加載高度.threshold: 200,// failure_limit: 同 failurelimitfailure_limit: 10,// event: 設置何種事件觸發時才加載, 默認 scrollevent: 'click',// effect: 使用何種載入效果effect: "fadeIn",// container: 對某容器中的圖片實現效果container: $("#container"),// data_attribute: 用于設置 lazyload 操作的自定義屬性(data-后面的屬性名)data_attribute : "attr",// skip_invisible: 是否不加載不可見圖片. true 不加載, false 加載.skip_invisible : false,// appear: 用于在圖片加載之前到顯示圖片之間的處理函數，一般用于展示加載動畫.appear: function() {},// load: 用于圖片加載完畢之后執行的函數.load: function() {},// placeholder: 設置占位圖片路徑placeholder : "img/lazy.gif",// failurelimit: 一次加載圖片的張數(圖片排序混亂時使用)failurelimit : 10,// effectspeed: 設置動畫持續時長, 單位毫秒effectspeed : 1000, });

各屬性介紹

以下內容轉自博文鏈接：https://blog.csdn.net/Leo_DLi/article/details/112315506

??1, threshold: 默認值 0??

threshold: 值為數字, 用于設置提前開始加載高度. 如設置為200, 表示滾動條在離目標位置還有 200 的高度時就開始加載圖片, 可以做到不讓用戶察覺。
??2, failure_limit : 默認值 0??failure_limit: 值為數字, 同 failurelimit(下文介紹)

??3, event: 默認值 "scroll"??event: 用于設置觸發加載的時機. 值有scroll(滾動), click(點擊), mouseover(鼠標劃過), sporty(運動的), foobar(…).可以實現鼠標莫過或點擊圖片才開始加載,后兩個值未測試…

??4, effect: 默認值 "show"??

effect: 用于設置顯示圖片是的動畫效果. 值有: show(直接顯示), fadeIn(淡入), slideDown(下拉)等

??5, container: 默認值 window??container: 值為某容器, 用于設置對某容器中的圖片實現效果. lazyload默認在拉動瀏覽器滾動條時生效, 這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖片

??6, data_attribute: 默認值 "original"??data_attribute: 用于設置 lazyload 操作的自定義屬性(data-后面的屬性名)

??7, skip_invisible: 默認值 true??skip_invisible: 設置是否加載不可見的圖片.

Lazy Load 插件默認對隱藏的圖片不加載(例如 display:none ). 這樣做有助于性能的優化. 如果希望連隱藏的圖片一起加載,則可以把 skip_invisible 設為 false .

??8, appear: 默認值 null??appear: 用于在圖片加載之前到顯示圖片之間的處理函數，一般用于展示加載動畫.

??9, load: 默認值 null??load: 用于圖片加載完畢之后執行的函數.

??10, placeholder: 默認值 "data:image/png;base64,iV......"??placeholder: 用于設置占位圖片.

值為某一圖片路徑. 此圖片用來占據將要加載的圖片的位置, 待圖片加載時, 占位圖則會隱藏

接下來的兩個是兼容低版本的屬性, 在該版本中正常使用.

??11, effectspeed : 毫秒數??effectspeed: 用于控制動畫的速度.

屬性默認是空的, 所以如果不設置它, 動畫的時間為400毫秒.

??12, failurelimit: 值為數字. 在圖片布局混亂時使用.??Lazy Load 有一個循環查找 img 的機制. 根據 HTML 文檔的布局從上往下查找, 當找到第一個并未顯示/加載的 img 時, 就會停止往下查找.(其實就是對 $("img.lazy") 這個對象(組)進行順序查找)。

Demo地址：??https://tools.afengim.com/demo/jquery-lazyload/??

原文地址：??https://www.afengblog.com/jquery-lazyload.html??

總結

以上是生活随笔為你收集整理的利用Jquery Lazyload JS插件实现网页图片延迟加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：好用的桌面日历软件desktopcal
下一篇：图片懒加载——lazyload