图片懒加载方案

关注

原创最新推荐文章于 2026-06-04 14:09:01 发布 353 阅读 AI 写同款· GEO 优化 ›

【高频考点精讲】图片懒加载原理深度解析：如何实现高性能的图片延迟加载方案 🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们聊聊前端性能优化中一个经典话题——图片懒加载。这玩意儿听起来简单，但真要玩出花样来，里面的门道可不少。阅读详情

一、scroll事件监听

<img src="default.jpg" data-src="http://www.xxx.com/target.jpg" />

let img = document.getElementsByTagName("img");

let num = img.length;

let count = 0;//计数器，从第一张图片开始计

lazyload();//首次加载别忘了显示图片

window.addEventListener('scroll', throttle(lazyload, 300));//节流

function lazyload() {
  let viewHeight = document.documentElement.clientHeight;//视口高度

  let scrollHeight = document.documentElement.scrollTop || 

document.body.scrollTop;//滚动条卷去的高度

  for(let i = count; i <num; i++) {
    // 元素现在已经出现在视口中

    if(img[i].offsetTop < scrollHeight + viewHeight) {
      if(img[i].getAttribute("src") !== "default.jpg") continue;
      img[i].src = img[i].getAttribute("data-src");
      count ++;
   }
 }
}

二、getBoundingClientRect

function lazyload() {
  for(let i = count; i <num; i++) {
    // 元素现在已经出现在视口中

    if(img[i].getBoundingClientRect().top < 

document.documentElement.clientHeight) {
      if(img[i].getAttribute("src") !== "default.jpg") continue;
      img[i].src = img[i].getAttribute("data-src");
      count ++;
   }
 }
}

三、IntersectionObserver

let img = document.getElementsByTagName("img");

const observer = new IntersectionObserver(changes => {
  //changes 是被观察的元素集合

  for(let i = 0, len = changes.length; i < len; i++) {
    let change = changes[i];
    // 通过这个属性判断是否在视口中

    if(change.isIntersecting) {
      const imgElement = change.target;
      imgElement.src = imgElement.getAttribute("data-src");
      observer.unobserve(imgElement);
   }
 }
})

Array.from(img).forEach(item => observer.observe(item));