摘要：今天給大家帶來好消息是，將原生支持圖片的惰性加載，支持對和進行延遲加載，只需要將屬性設置為即可。該屬性支持標簽，無論標簽是否含有屬性及被標簽包裹，以及標簽。

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

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

今天給大家帶來好消息是，Chrome 75 將原生支持圖片的惰性加載，支持對img和iframe進行延遲加載，只需要將loading屬性設置為lazy即可。

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

lazy：對資源進行延遲加載。

eager：立即加載資源。

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

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

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

示例代碼：

              
  

                  
最新活動