不少網(wǎng)站都會(huì)在網(wǎng)頁(yè)當(dāng)中埋入延遲加載的JavaScript代碼，以便降低首次加載的圖片數(shù)量，加快網(wǎng)頁(yè)首次呈現(xiàn)時(shí)間。Google Chrome已預(yù)定在75版本當(dāng)中原生支持這項(xiàng)功能并自動(dòng)啟動(dòng)，包含lazy image loading和lazy iframe loading。

網(wǎng)頁(yè)結(jié)構(gòu)越來(lái)越復(fù)雜，需要加載的物件也越來(lái)越多，該如何降低首次連入網(wǎng)頁(yè)的延遲，對(duì)于使用者體驗(yàn)影響不小。目前跨網(wǎng)頁(yè)瀏覽器的做法為埋入1小段JavaScript代碼，延后加載顯示視區(qū)以外的物件，等到使用者滑動(dòng)頁(yè)面，接近視區(qū)時(shí)才會(huì)向服務(wù)器發(fā)出請(qǐng)求并下載，此種做法可有效降低首次進(jìn)入網(wǎng)頁(yè)的加載時(shí)間。

▲lazy loading不僅讓網(wǎng)頁(yè)顯示時(shí)間縮短，也可以減少一開(kāi)始的數(shù)據(jù)傳輸量。

Google Chrome網(wǎng)頁(yè)瀏覽器將從75版本號(hào)開(kāi)始，原生支持、里的srcset、

loading="lazy"就如同現(xiàn)在的處理方式，當(dāng)使用者卷動(dòng)網(wǎng)頁(yè)至接近視區(qū)時(shí)才會(huì)加載，loading="eager"則是要求瀏覽器立即下載加載，loading="auto"則是交由網(wǎng)頁(yè)瀏覽器自行決定加載時(shí)機(jī)點(diǎn)。由于Google Chrome預(yù)計(jì)是第一個(gè)導(dǎo)入原生lazy loading的網(wǎng)頁(yè)瀏覽器，若是網(wǎng)頁(yè)開(kāi)發(fā)者欲達(dá)成跨瀏覽器兼容性，則必須額外加入判斷語(yǔ)法if('loading' in HTMLImageElement.prototype)，在else{}段落填入原本用以lazy loading的JavaScript。

▲Google Chome桌面版73版已加入lazy image loading和lazy iframe loading實(shí)驗(yàn)性功能。

lazy loading還可以降低剛開(kāi)始加載網(wǎng)頁(yè)的流量，因此Google Chrome這項(xiàng)功能一開(kāi)始其實(shí)是從Android版本進(jìn)行試驗(yàn)，如今桌面版本也放在chrome://flags實(shí)驗(yàn)功能菜單當(dāng)中，使用者可自行選擇是否先行開(kāi)啟該功能。另外一家Mozilla Firefox目前僅支持新分頁(yè)內(nèi)容的延遲加載，當(dāng)使用者確實(shí)點(diǎn)擊新分頁(yè)使其顯示在最上層，才會(huì)開(kāi)始加載該分頁(yè)內(nèi)容，至于是否原生支持圖片或是iframe的延遲加載，目前并未有任何風(fēng)聲傳出。

總結(jié)

以上是生活随笔為你收集整理的将图片显示在应用最上层_谷歌Chrome 75将原生支持lazy loading，动动手也可以抢先试玩...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。