摘要：今天給大家?guī)砗孟⑹?，將原生支持圖片的惰性加載，支持對和進(jìn)行延遲加載，只需要將屬性設(shè)置為即可。該屬性支持標(biāo)簽，無論標(biāo)簽是否含有屬性及被標(biāo)簽包裹，以及標(biāo)簽。

隨著瀏覽器性能的提升，前端也越來越關(guān)注用戶體驗(yàn)，而影響用戶體驗(yàn)其中一個(gè)很重要的指標(biāo)便是受首屏渲染速度。我們常常會(huì)針對樣式、腳本、圖片、音頻、視頻等資源做處理，比如針對樣式和腳本的壓縮合并，將圖片合并成雪碧圖、將小圖轉(zhuǎn)化成base64、延遲加載等減少網(wǎng)絡(luò)請求次數(shù)。

現(xiàn)在大部分web應(yīng)用含有大量的圖片，對圖片進(jìn)行延遲加載無疑極大提升用戶體驗(yàn)。以往我們可能會(huì)通過對比底部圖片據(jù)可視區(qū)底部距離、窗口高度、滾動(dòng)條距離來判斷是否加載新圖片，抑或在支持IntersectionObserver API的瀏覽器中使用交叉區(qū)觀察者進(jìn)行監(jiān)聽，而這都需要我們寫腳本去判斷及控制。

今天給大家?guī)砗孟⑹牵珻hrome 75 將原生支持圖片的惰性加載，支持對img和iframe進(jìn)行延遲加載，只需要將loading屬性設(shè)置為lazy即可。

Loading屬性控制瀏覽器是否延遲加載屏幕外的圖像和iframe：

lazy：對資源進(jìn)行延遲加載。

eager：立即加載資源。

auto：瀏覽器自行判斷決定是否延遲加載資源。

默認(rèn)效果（不設(shè)置該屬性）和loading=auto的效果保持一致。需要注意的是，若瀏覽器決定該資源適合延遲加載，則需要避免頁面不正常顯示和影響用戶體驗(yàn)。

該loading屬性支持img標(biāo)簽，無論img標(biāo)簽是否含有srcset屬性及被picture標(biāo)簽包裹，以及iframe標(biāo)簽。

示例代碼：

              
  

                  
最新活動(dòng)