JS實現(xiàn)圖片懶加載(lazyload)過程詳解
對于圖片較多的頁面，使用懶加載可以大幅提高頁面加載速度，提高用戶體驗。
懶加載的意義（為什么要使用懶加載）
對頁面加載速度影響最大的就是圖片，一張普通的圖片可以達(dá)到幾M的大小，而代碼也許就只有幾十KB。當(dāng)頁面圖片很多時，頁面的加載速度緩慢，幾S鐘內(nèi)頁面沒有加載完成，也許會失去很多的用戶。
所以，對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動到可視區(qū)域后再去加載。這樣子對于頁面加載性能上會有很大的提升，也提高了用戶體驗。
原理
將頁面中的img標(biāo)簽src指向一張小圖片或者src為空，然后定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張默認(rèn)的圖片，否則當(dāng)src為空時也會向服務(wù)器發(fā)送一次請求?？梢灾赶騦oading的地址。
注：圖片要指定寬高
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
當(dāng)載入頁面時，先把可視區(qū)域內(nèi)的img標(biāo)簽的data-src屬性值負(fù)給src，然后監(jiān)聽滾動事件，把用戶即將看到的圖片加載。這樣便實現(xiàn)了懶加載。
代碼
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>
JavaScript
<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷
lazyload(); //頁面載入完畢加載可是區(qū)域內(nèi)的圖片
window.onscroll = lazyload;
function lazyload() { //監(jiān)聽頁面滾動事件
var seeHeight = document.documentElement.clientHeight; //可見區(qū)域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>
jQuery
<script>
var n = 0,
imgNum = $("img").length,
img = $('img');
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
</script>
使用節(jié)流函數(shù)進(jìn)行性能優(yōu)化
如果直接將函數(shù)綁定在scroll事件上，當(dāng)頁面滾動時，函數(shù)會被高頻觸發(fā)，這非常影響瀏覽器的性能。
我想實現(xiàn)限制觸發(fā)頻率，來優(yōu)化性能。
節(jié)流函數(shù)：只允許一個函數(shù)在N秒內(nèi)執(zhí)行一次。下面是一個簡單的節(jié)流函數(shù)：
// 簡單的節(jié)流函數(shù)
//fun 要執(zhí)行的函數(shù)
//delay 延遲
//time 在time時間內(nèi)必須執(zhí)行一次
function throttle (fun, delay, time) {
let timeout
let startTime = new Date()
return function () {
let context = this
let args = Array.prototype.slice.call(arguments)
let curTime = new Date()
clearTimeout(timeout)
if (curTime - startTime >= time) {
// 如果達(dá)到了規(guī)定的觸發(fā)時間間隔，觸發(fā) handler
fun.apply(context, args)
startTime = curTime
} else {
// 沒達(dá)到觸發(fā)間隔，重新設(shè)定定時器
timeout = setTimeout(function () {
fun.apply(context, args)
}, delay)
}
}
};
// 實際想綁定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了節(jié)流函數(shù)
window.addEventListener('scroll',throttle(lazyload,500,1000));
使用去抖函數(shù)進(jìn)行性能優(yōu)化
去抖相比較節(jié)流函數(shù)要稍微簡單一點，去抖是讓函數(shù)延遲執(zhí)行，而節(jié)流比去抖多了一個在一定時間內(nèi)必須要執(zhí)行一次。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Selenium執(zhí)行JavaScript腳本的方法示例
這篇文章主要介紹了Selenium執(zhí)行JavaScript腳本的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
js 獲取和設(shè)置css3 屬性值的實現(xiàn)方法
本篇文章介紹了，使用js 獲取和設(shè)置css3 屬性值的實現(xiàn)方法。需要的朋友參考下2013-05-05
AutoJs4.4.1免費版快速接通vscode調(diào)試腳本的操作方法
這篇文章主要介紹了AutoJs4.4.1免費版快速接通vscode進(jìn)行調(diào)試腳本,首先下載AutoJs并安裝，下載完成后，將2個apk文件拷貝到手機(jī)安裝即可，接下來需要安裝插件，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
js函數(shù)中有三個在特定場合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個經(jīng)常被我們忽略的方法：reduce，這個方法簡直強(qiáng)大的不要不要的。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
這篇文章主要介紹了JS實現(xiàn)的模仿QQ頭像資料卡顯示與隱藏效果,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-04-04
調(diào)用innerHTML之后onclick失效問題的解決方法
調(diào)用innerHTML之后，onclick失效了，這也是在意料之中的，因為innerHTML是以文本形式插入的button，所以無法識別onclick事件2014-01-01
這篇文章主要介紹了webpack是如何實現(xiàn)模塊化加載的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
js中通過getElementsByName訪問name集合對象的方法
下面小編就為大家?guī)硪黄猨s中通過getElementsByName訪問name集合對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了JS數(shù)組去重的常用4種方法,ES6的Set類數(shù)組去重,for循環(huán)嵌套for循環(huán),indexOf去重,利用filter需要的朋友可以參考下2022-04-04
微信小程序后端(java)開發(fā)流程的詳細(xì)步驟
這篇文章主要介紹了微信小程序后端開發(fā)流程的詳細(xì)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11