簡單的js實現圖片列表懶加載的方法和代碼。必須在懶加載js前面加上jquery纔可以。

<script>
// 獲取頁面可視區域的高度
const visibleHeight = window.innerHeight;
// 獲取頁面上所有圖片的元素
const imgs = document.querySelectorAll("img");
// 爲每個圖片元素添加 data-src 屬性
for (const img of imgs) {
img.setAttribute("data-src", img.src);
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
}
// 監聽滾動事件
window.addEventListener("scroll", () => {
// 遍歷所有圖片元素
for (const img of imgs) {
  // 獲取圖片元素的頂部位置
  const top = img.getBoundingClientRect().top;
  // 如果圖片元素的頂部位置距離可視區域頂部距離小於閾值
  if (top <= visibleHeight - threshold) {
   // 延遲 0.5 秒後，將圖片 src 屬性設置爲 data-src 屬性的值
   setTimeout(() => {
    img.src = img.getAttribute("data-src");
   }, delay);
  }
}
});
// 設置閾值
const threshold = 100;
// 設置延遲
const delay = 50;
</script>