什么是懶加載
懶加載是一種
網(wǎng)頁優(yōu)化技術(shù)
作用
圖片作為一種網(wǎng)頁資源哮伟，請求時同樣將占用網(wǎng)絡(luò)資源亮蒋，導(dǎo)致網(wǎng)頁首屏的加載時間被拉長献幔。
如果一次性將網(wǎng)頁的所有圖片資源加載煮寡，會同時間出現(xiàn)大量的圖片請求虹蓄。而懶加載，則是將圖片的加載幸撕，從原先的一口氣加載變成按需加載的模式薇组，減少同時間發(fā)起的資源請求，加快頁面打開的速度坐儿，優(yōu)化用戶體驗律胀。
原理
通過JavaScript腳本，使圖片僅在當(dāng)前可視區(qū)域的視窗內(nèi)出現(xiàn)時才加載該圖片挑童。達到減少首屏首次請求圖片資源的次數(shù)的技術(shù)就稱為圖片懶加載
https://lanhai1.github.io/archives/ 個人博客
思路
- 首先獲取圖片元素 保存在一個數(shù)組中 方便后面渲染至頁面
- 封裝函數(shù) => 判斷該圖片是否可以進行加載
- 封裝函數(shù) => 獲取圖片與窗口的信息
- 相比較 window的可視高度 是否 大于等于 圖片相對于視窗的top值
- 返回比較值
- 封裝函數(shù) => 加載圖片 參數(shù)1:元素 參數(shù)2:數(shù)組索引值
- 獲取自定義屬性(元素存放src的屬性)
- 元素賦值正確的src
- 從數(shù)組中刪除已經(jīng)渲染了的圖片
- 封裝函數(shù) => 滾動事件
- 為瀏覽器注冊滾動時間 監(jiān)測是否繼續(xù)懶加載
- 封裝函數(shù) => 初始化
- 調(diào)用 是否加載圖片函數(shù)
- 調(diào)用 滾動事件函數(shù)
typescript代碼
// 圖片懶加載類
class LazyLoads {
imglist: Array<Element>;
// 構(gòu)造器
constructor(public el: string) {
// 獲取圖片元素 追加至數(shù)組
this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懶加載的圖片集合
}
// 判斷該圖片是否可以加載
canILoad = () => {
// 循環(huán)遍歷數(shù)組
for (let i = this.imglist.length; i--;) {
this.getBound(this.imglist[i]) && this.loadImage(this.imglist[i], i);
}
}
// 獲取圖片與窗口的信息
getBound = (el: Element): boolean => {
// 獲取元素相對于視窗的位置
let bound = el.getBoundingClientRect();
// 獲取window可視高度
let clientHeight = window.innerHeight;
// 判斷是否需要加載數(shù)據(jù)
return (bound.top <= clientHeight);
}
// 加載圖片
loadImage = (el, index: number) => {
// 獲取自定義屬性
let src = el.getAttribute('data-lanhai');
// 賦值
el.src = src;
// 刪除已經(jīng)渲染了的圖片
this.imglist.splice(index, 1);
}
getScroll = () => {
// 為瀏覽器注冊滾動時間 監(jiān)測是否繼續(xù)懶加載
window.addEventListener('scroll', () => {
this.imglist.length && this.canILoad();
});
}
// 初始化
init = () => {
this.canILoad();
this.getScroll();
}
}
// 實例化對象累铅，參數(shù)則是需要使用懶加載的圖片
let start = new LazyLoads('img')
// 初始化
start.init()
編譯后 JavaScript代碼
// 圖片懶加載類
var LazyLoads = /** @class */ (function () {
// 構(gòu)造器
function LazyLoads(el) {
var _this = this;
this.el = el;
// 判斷是否該圖片是否可以加載
this.canILoad = function () {
// 循環(huán)遍歷數(shù)組
for (var i = _this.imglist.length; i--;) {
_this.getBound(_this.imglist[i]) && _this.loadImage(_this.imglist[i], i);
}
};
// 獲取圖片與窗口的信息
this.getBound = function (el) {
// 獲取元素相對于視窗的位置
var bound = el.getBoundingClientRect();
// 獲取window可視高度
var clientHeight = window.innerHeight;
// 判斷是否需要加載數(shù)據(jù)
return (bound.top <= clientHeight);
};
// 加載圖片
this.loadImage = function (el, index) {
// 獲取自定義屬性
var src = el.getAttribute('data-lanhai');
// 賦值
el.src = src;
// 刪除已經(jīng)渲染了的圖片
_this.imglist.splice(index, 1);
};
this.getScroll = function () {
// 為瀏覽器注冊滾動時間 監(jiān)測是否繼續(xù)懶加載
window.addEventListener('scroll', function () {
_this.imglist.length && _this.canILoad();
});
};
// 初始化
this.init = function () {
_this.canILoad();
_this.getScroll();
};
// 獲取圖片元素 追加至數(shù)組
this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懶加載的圖片集合
}
return LazyLoads;
}());
// 實例化對象，參數(shù)則是需要使用懶加載的圖片
var start = new LazyLoads('img');
// 初始化
start.init();
