對於目前的圖片懶載入，我們一般採用的是通過第三方庫或懶載入庫來實現，但是該方式的顯著問題就是，必須按順序執行： 1、載入初始的 HTML 響應內容 2、載入懶載入庫 3、載入圖片 假如瀏覽器能直接支持懶載入，那是最好的，這一想法也不是不可能哦！從Chrome 75開始，我們可以通過切換兩個開關來手動 ...
對於目前的圖片懶載入，我們一般採用的是通過第三方庫或懶載入庫來實現，但是該方式的顯著問題就是，必須按順序執行：
1、載入初始的 HTML 響應內容
2、載入懶載入庫
3、載入圖片
假如瀏覽器能直接支持懶載入，那是最好的，這一想法也不是不可能哦！從Chrome 75開始，我們可以通過切換兩個開關來手動啟用懶載入功能，可能最新的Chrome將會預設開啟懶載入功能了，就是說不用我們手動去設置了。(註意這裡僅說到了是Chrome瀏覽器哦)
loading特性的原理：
原生懶載入功能使用了一種預檢請求來獲取圖片文件的前2048位元組數據。根據預先取得的數據，瀏覽器會試著確定該圖片的大小，在第一個(如果圖片大小小於2KB，一個預檢請求就夠了)或第二次請求完成後，完整圖片一載入完畢，其load事件就會解除監聽。
我們可以通過一段腳本來判斷瀏覽器是否支持懶載入功能，如果支持，可直接在img標簽中寫上loading並設置相關的值即可輕鬆實現懶載入，loading有三個值，分別是auto(預設值，瀏覽器自行決定是否啟用懶載入)、eager(直接載入該圖片)、lazy(開啟懶載入)。
使用以下腳本可以判斷瀏覽器是否支持原生懶載入功能：
<script>
if("loading" in HTMLImageElement.prototype){
alert("支持");
}else{
alert("不支持，你可能需要引入懶載入庫來實現懶載入");
}
</script>
如果支持，我們可以在img標簽中為loading指定值：
<img src="" alt="瀏覽器自行決定是否啟用懶載入" loading="auto">
<img src="" alt="瀏覽器立即載入該圖片" loading="eager">
<img src="" alt="瀏覽器使用懶載入" loading="lazy">
