简单的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>