簡(jiǎn)單的js實(shí)現(xiàn)圖片列表懶加載的方法和代碼。必須在懶加載js前面加上jquery才可以。

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