web前端入門到實戰：HTML自帶懶加載技術

對於目前的圖片懶加載，咱們通常採用的是經過第三方庫或懶加載庫來實現，可是該方式的顯著問題就是，必須按順序執行：

一、加載初始的 HTML 響應內容
二、加載懶加載庫
三、加載圖片

假如瀏覽器能直接支持懶加載，那是最好的，這一想法也不是不可能哦！從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">

專門創建的學習Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享學習方法和須要注意的小細節，不停更新最新的教程和學習技巧（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）