應(yīng)用程序大小和文件請(qǐng)求的一半用于加載圖像稚矿。如果您想使應(yīng)用程序更快掏熬，更輕便，那么考慮圖像優(yōu)化是一個(gè)很好的起點(diǎn)奶栖。
您可以通過延遲加載圖像來加快應(yīng)用程序的速度匹表。僅當(dāng)它們出現(xiàn)在設(shè)備的視口中或附近時(shí)才顯示它們门坷。可以使用Intersection Observer API來完成袍镀。
Intersection Observer
它是一種性能API默蚌，可在元素進(jìn)入或離開視口時(shí)通知您。在隱藏或顯示元素時(shí)獲取信息非常有用苇羡。您可以將其用于分析绸吸，以通過查看當(dāng)前元素來跟蹤用戶花費(fèi)了多少時(shí)間，可以在視頻到達(dá)視圖中的特定點(diǎn)時(shí)開始或停止視頻设江，或者在滾動(dòng)到底部時(shí)加載更多內(nèi)容（例如圖像）頁面的锦茁。
Intersection Observer是跟蹤滾動(dòng)事件的非常有效且完美的工具。
要使用Intersection Observer叉存，我們調(diào)用構(gòu)造函數(shù)并傳遞一個(gè)回調(diào)函數(shù)码俩。該回調(diào)將在觀察到的每個(gè)元素上運(yùn)行。為了觀察特定的元素歼捏，我們選擇它們并observe在每個(gè)元素上調(diào)用方法：
<head>
<style>
.box {
border: 1px solid;
height: 400px;
width: 500px;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<script>
const io = new IntersectionObserver((entries) =>
entries.forEach((entry) =>
console.log(
entry.target.innerText + " entered the view: " + entry.isIntersecting
)
)
);
document.querySelectorAll(".box").forEach((element) => io.observe(element));
</script>
</body>
如果運(yùn)行此代碼并檢查瀏覽器控制臺(tái)稿存，則應(yīng)該看到所有div元素都已注冊(cè)，并且在滾動(dòng)頁面時(shí)瞳秽，每個(gè)元素在進(jìn)入和離開視口時(shí)都會(huì)輸出輸出瓣履。
延遲加載圖像
當(dāng)瀏覽器在image標(biāo)簽中檢測(cè)到source屬性時(shí)，它將從路徑中下載练俐，解析和渲染袖迎。通過操縱源和數(shù)據(jù)集屬性，我們可以決定何時(shí)顯示圖像腺晾。
延遲加載圖像的想法是：
- 刪除圖像
src屬性或添加占位符 - 將源鏈接放在
dataset屬性中 - 在圖像上調(diào)用 intersection observer
- 當(dāng)檢測(cè)到相交時(shí)燕锥，從數(shù)據(jù)集中獲取源并將其放置在
src
數(shù)據(jù)集屬性是存儲(chǔ)其他信息以供以后訪問的理想位置。通過將實(shí)際的圖像路徑放在中data-src悯蝉，然后選擇它并將其設(shè)置為src屬性脯宿，我們將加載圖像。
<body>
<img class="lazy" data-src="lazy-image.jpg">
<img class="lazy" data-src="lazy-image.jpg">
<img class="lazy" data-src="lazy-image.jpg">
<script>
const io = new IntersectionObserver((entries) =>
entries.forEach((entry) => {
// set image source only when it is in the viewport
if (entry.isIntersecting) {
const image = entry.target;
// setting image source from the dataset
image.src = image.dataset.src;
// when image is loaded, we do not need to observe it any more
io.unobserve(image);
}
})
);
document.querySelectorAll(".lazy").forEach((element) => io.observe(element));
</script>
</body>
這是如何僅使用純JavaScript來延遲加載圖像的最簡單示例泉粉。
需要考慮的事情
圖像標(biāo)簽的大小由圖片定義。如果您沒有為其指定尺寸榴芳，或未為該src屬性放置占位符嗡靡，則所有圖像的大小均為0px，并由觀察者立即加載窟感。
Intersection Observer API主要用于所有現(xiàn)代瀏覽器讨彼。但是，如果您需要對(duì)較舊版本的支持柿祈，則應(yīng)使用polyfill哈误。同樣哩至，一個(gè)好的方法是首先檢查瀏覽器是否具有Intersection Observer。如果沒有蜜自，請(qǐng)運(yùn)行后備代碼菩貌。
結(jié)論
使用圖像延遲加載將使頁面更輕，加載時(shí)間更快重荠，瀏覽器資源的使用更少箭阶，并使用戶體驗(yàn)更加愉悅。
