图片懒加载 -- 性能优化-CSDN博客

本文链接：https://blog.csdn.net/kxmdjqq/article/details/132071677

本文介绍了两种JavaScript实现图片懒加载的方法：一种是利用scroll事件，当图片进入视窗时加载；另一种是使用IntersectionObserverAPI，当图片与视口有交集时动态加载，提高页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、JS 实现图片懒加载

<img  data-src="./images/1.jpg"/>

方法一

function loadImg() {
  const imgaes = document.querySelectorAll("img");
  imgaes.forEach(image => {
    const imageTop = image.getBoundingClientRect().top;
    console.log();
    if (imageTop < window.innerHeight && image.src == "") {
      const data_src = image.getAttribute("data-src");
      image.setAttribute("src", data_src);
    }
  });
}

window.addEventListener("scroll", e => {
  loadImg();
});
loadImg();

方法二

const images = document.querySelectorAll("img");

function callback(entries) {
  console.log(entries);
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      const data_src = image.getAttribute("data-src");
      image.setAttribute("src", data_src);
      observer.unobserve(image);
      console.log("触发");
    }
  });
}

const observer = new IntersectionObserver(callback);
images.forEach(image => {
  observer.observe(image);
});
/*
重点：
const observer = new IntersectionObserver(callback);
observer.observe(DOM 节点);
observer.unobserve(DOM 节点);
isIntersecting 是否与视窗相交
*/