資訊專欄INFORMATION COLUMN
圖片懶加載有幾個(gè)重要的點(diǎn):
1. 圖片 的src放到其他屬性上，加統(tǒng)一的類名，供選擇和 加樣式，比如:2. js懶加載函數(shù)
有幾個(gè)重點(diǎn):
獲取可視區(qū)域的高度,ie9+ 用window.innerHeight
viewHeight = window.innerHeight || window.documentElement.clientHeight
獲取當(dāng)前元素距離可視區(qū)域頂部的高度用 getBoundingClientRect().top
getBoundingClientRect 和 clientHeight的關(guān)系
當(dāng)getBoundingClientRect().top 小于 viewHeight的時(shí)候，給元素的src 賦值
ele.src = ele.getAttribute("data-src");
最后就是監(jiān)聽滾動(dòng)事件了
lazyload完整版function lazyload() {
const viewHeight = window.innerHeight || window.documentElement.clientHeight;
let imgs = document.querySelectorAll(".pic");
let num = 0, len = imgs.length;
for(let i = num; i < len; i ++) {
if(imgs[i].getBoundingClientRect().top < viewHeight) {
console.log("i", i);
imgs[i].src = imgs[i].getAttribute("data-src");
num += 1 ;
}
}
}
window.addEventListener("scroll", lazyload);
當(dāng)然這樣監(jiān)聽滾動(dòng)肯定耗費(fèi)性能，建議加上節(jié)流?？蓞⒖忌弦黄恼?/p>
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/99764.html
摘要：之前寫過一版圖片懶加載的文章，剛好周末在整理文件的時(shí)候，大概又看了一遍之前寫的代碼發(fā)現(xiàn)有很多可以優(yōu)化的地方。這篇文章主要就是結(jié)合上篇瀑布流式圖片懶加載代碼示例再來看看圖片懶加載的一些知識(shí)。 之前寫過一版圖片懶加載的文章，剛好周末在整理文件的時(shí)候，大概又看了一遍之前寫的代碼發(fā)現(xiàn)有很多可以優(yōu)化的地方。這篇文章主要就是結(jié)合上篇《瀑布流式圖片懶加載代碼示例》再來看看圖片懶加載的一些知識(shí)。 圖片...
摘要：一個(gè)簡(jiǎn)單的圖片懶加載所謂懶加載，是為了提高網(wǎng)頁(yè)的打開的速度，獲得更好用戶體驗(yàn)的一種手段。本文僅僅簡(jiǎn)單的舉例圖片的懶加載，是性能優(yōu)化的入門的篇章，方法比較簡(jiǎn)單明了，只要有一點(diǎn)基礎(chǔ)就一定能看懂。 一個(gè)簡(jiǎn)單的圖片懶加載 所謂懶加載，是為了提高網(wǎng)頁(yè)的打開的速度，獲得更好用戶體驗(yàn)的一種手段。其選擇的重要的部分先加載，次要的部分需要的時(shí)候再加載。比如一個(gè)電商網(wǎng)站，首屏通常有很多的數(shù)據(jù)，清晰度較高的...
摘要：一個(gè)簡(jiǎn)單的圖片懶加載所謂懶加載，是為了提高網(wǎng)頁(yè)的打開的速度，獲得更好用戶體驗(yàn)的一種手段。本文僅僅簡(jiǎn)單的舉例圖片的懶加載，是性能優(yōu)化的入門的篇章，方法比較簡(jiǎn)單明了，只要有一點(diǎn)基礎(chǔ)就一定能看懂。 一個(gè)簡(jiǎn)單的圖片懶加載 所謂懶加載，是為了提高網(wǎng)頁(yè)的打開的速度，獲得更好用戶體驗(yàn)的一種手段。其選擇的重要的部分先加載，次要的部分需要的時(shí)候再加載。比如一個(gè)電商網(wǎng)站，首屏通常有很多的數(shù)據(jù)，清晰度較高的...
閱讀 665·2023-04-26 02:58
閱讀 2387·2021-09-27 14:01
閱讀 3689·2021-09-22 15:57
閱讀 1272·2019-08-30 15:56
閱讀 1106·2019-08-30 15:53
閱讀 864·2019-08-30 15:52
閱讀 794·2019-08-26 14:01
閱讀 2237·2019-08-26 13:41
