图片懒加载

最新推荐文章于 2025-08-27 15:25:42 发布

原创最新推荐文章于 2025-08-27 15:25:42 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文探讨了三种优化图片加载的方法，包括DOM操作判断、getBoundingClientRect()和Intersection Observer。着重比较了它们在性能上的优劣，尤其是Intersection Observer的兼容性挑战。

1.offsetTop 为元素距离顶部的距离；window.innerHeight 为当前窗口的高度；window.scrollY 为滚动距离；不难知道，当 i.offsetTop <= window.innerHeight + window.scrollY时图片就处于窗口可视区

//获取全部img标签
var images = document.getElementsByTagName("img");
 
 window.addEventListener("scroll", (e) => {
    //当发生滚动事件时调用ergodic事件
    ergodic();
  });
  function ergodic() {
    // 遍历每一张图
    for (let i of images) {
      //判断当前图片是否在可视区内
      if (i.offsetTop <= window.innerHeight + window.scrollY) {
          //获取自定义data-src属性的值
          let trueSrc = i.getAttribute("data-src");
          //把值赋值给图片的src属性
          i.setAttribute("src", trueSrc);
      }
    }
  }
  //没发生滚动事件时也要先执行一次
  ergodic();

2.getBoundingClientRect().top 为元素相对于窗口的位置；window.innerHeight 为当前窗口的高度；当元素对于窗口的位置小于当前窗口的高度时，即处于窗口可视区

window.addEventListener("scroll", (e) => {
      ergodic();
    });
    function ergodic() {
      for (let i of images) {
        //计算方式和第一种方式不同
        if (i.getBoundingClientRect().top < window.innerHeight) {
          let trueSrc = i.getAttribute("data-src");
          i.setAttribute("src", trueSrc);
        }
      }
    }
    ergodic();

上面两种方案的缺点，就是一当发生滚动事件时，就发生了大量的循环和判断操作判断图片是否可视区里

3.引入一个叫 Intersection Observer 观察器接口，它是是浏览器原生提供的构造函数
缺点：兼容性不太好

var images = document.getElementsByTagName("img");
  function callback(entries) {
   for (let i of entries) {
     if (i.isIntersecting) {
         let img = i.target;
         let trueSrc = img.getAttribute("data-src");
         img.setAttribute("src", trueSrc);
         // 结束观察
         observer.unobserve(img);
     }
   } 
 }
     const observer = new IntersectionObserver(callback);
     for (let i of images) {
       observer.observe(i);
     }