當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時(shí)間：2023/12/29 javascript 22 豆豆

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

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

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

Github項(xiàng)目地址：https://github.com/tuupola/lazyload

本文使用的是1.9.7版本（實(shí)際與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.實(shí)例代碼

<!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>

打開網(wǎng)頁后只加載當(dāng)前屏幕內(nèi)的圖片，只有滾動(dòng)或下拉瀏覽器才會(huì)加載底部的圖片

2.初始化屬性

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

初始化代碼：

可以通過不定義??.lazy樣式??實(shí)現(xiàn)不帶??class="lazy"??即可初始化，會(huì)對該頁面的全部img標(biāo)簽生效

全局初始化代碼如下：

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

可以在初始化代碼??$("img.lazy").lazyload({??后添加屬性，以實(shí)現(xiàn)更多效果，每個(gè)屬性以,結(jié)尾

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

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

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

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

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

以下介紹基礎(chǔ)的使用屬性：

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

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

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

??effectspeed??屬性可以設(shè)置動(dòng)畫持續(xù)時(shí)長, 單位毫秒，如：??1000??（動(dòng)畫持續(xù)1000ms）

3.可用的初始化屬性

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

各屬性介紹

以下內(nèi)容轉(zhuǎn)自博文鏈接：https://blog.csdn.net/Leo_DLi/article/details/112315506

??1, threshold: 默認(rèn)值 0??

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

??3, event: 默認(rèn)值 "scroll"??event: 用于設(shè)置觸發(fā)加載的時(shí)機(jī). 值有scroll(滾動(dòng)), click(點(diǎn)擊), mouseover(鼠標(biāo)劃過), sporty(運(yùn)動(dòng)的), foobar(…).可以實(shí)現(xiàn)鼠標(biāo)莫過或點(diǎn)擊圖片才開始加載,后兩個(gè)值未測試…

??4, effect: 默認(rèn)值 "show"??

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

??5, container: 默認(rèn)值 window??container: 值為某容器, 用于設(shè)置對某容器中的圖片實(shí)現(xiàn)效果. lazyload默認(rèn)在拉動(dòng)瀏覽器滾動(dòng)條時(shí)生效, 這個(gè)參數(shù)可以讓你在拉動(dòng)某DIV的滾動(dòng)條時(shí)依次加載其中的圖片

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

??7, skip_invisible: 默認(rèn)值 true??skip_invisible: 設(shè)置是否加載不可見的圖片.

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

??8, appear: 默認(rèn)值 null??appear: 用于在圖片加載之前到顯示圖片之間的處理函數(shù)，一般用于展示加載動(dòng)畫.

??9, load: 默認(rèn)值 null??load: 用于圖片加載完畢之后執(zhí)行的函數(shù).

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

值為某一圖片路徑. 此圖片用來占據(jù)將要加載的圖片的位置, 待圖片加載時(shí), 占位圖則會(huì)隱藏

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

??11, effectspeed : 毫秒數(shù)??effectspeed: 用于控制動(dòng)畫的速度.

屬性默認(rèn)是空的, 所以如果不設(shè)置它, 動(dòng)畫的時(shí)間為400毫秒.

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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