技術標籤：前端jsjavascript

圖片懶載入的實現思路：當後端返回給前端圖片的連結後，將正確的連結放在img標籤的一個隱藏屬性裡，當img標籤可見時賦予正確的屬性，這時才開始載入圖片。

當所展示的列表資料過多時，這種方法很有效。

方法一：

把正確的連結設定到一個隱藏的屬性裡，可見時轉換

當元素可見時，將 data-src 裡的資料寫到 src 裡(可利用 DataSet API 實現)
<img data-src="dumogu.jpg">

img.src = img.datset.src;

判斷元素是否可見也有很多解決方法，下面這種最簡單

//InterpObserver觀察一個DOM元素的可見性，監聽其位置的變化。
 

const observer = new IntersectionObserver((changes) => {
  // changes: 目標元素集合，遍歷新增監聽回撥
  changes.forEach((change) => {
    // 當元素可見時進行轉換
    if (change.isIntersecting) {
      const img = change.target;
      img.src = img.dataset.src;
      observer.unobserve(img); //替換後停止觀察
    }
  });
});
//img: 你想要觀察的img元素
 

observer.observe(img);

方法二：

瀏覽器已經實現了圖片懶載入這個功能，加上一個屬性就行了

<img src="dumogu.jpg" loading="lazy">

關於 loading 屬性的文章也可以檢視 Native image lazy-loading for the web!

兩種方法雖然簡單，但是相容性不是很好，在此僅作學習記錄用