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