js如何实现图片懒加载提升性能的4种懒加载实现技巧！-js教程-PHP中文网

js如何实现图片懒加载提升性能的4种懒加载实现技巧！

裘德小鎮的故事

发布： 2025-07-01 15:48:02

原创

641人浏览过

图片懒加载的核心是延迟加载非首屏图片，等其进入可视区域时才加载，提升页面性能。具体实现方式包括：1.基于offsettop和window.innerheight进行简单判断；2.使用getboundingclientrect优化可见性检测；3.利用intersection observer api异步监听元素可见性，性能更优；4.结合requestanimationframe优化滚动事件处理，避免页面卡顿。seo优化可通过<noscript>标签、服务器端渲染或使用loading="lazy"属性实现。图片加载前应预留空间，防止布局抖动，可通过固定宽高、css aspect-ratio属性或低分辨率占位图实现。选择实现方式需综合考虑项目需求、兼容性及性能优化目标。

js如何实现图片懒加载提升性能的4种懒加载实现技巧！

图片懒加载，简单来说，就是让页面上的图片不是一次性全部加载，而是等到它们进入用户的可视区域时才加载。这样做可以显著提升页面加载速度，特别是当页面包含大量图片时。

解决方案

实现图片懒加载的核心在于监听图片的滚动事件，判断图片是否进入可视区域。一旦图片进入可视区域，就将图片的src属性设置为真实的图片地址，从而触发图片的加载。

以下提供四种实现懒加载的技巧：

基于offsetTop和window.innerHeight的简单实现

这种方法是最基础的，通过比较图片距离页面顶部的距离(offsetTop)和窗口的内部高度(window.innerHeight)以及滚动条滚动的距离来判断图片是否可见。

function lazyLoad() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach(img => {
    if (img.offsetTop < window.innerHeight + window.scrollY) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src'); // 防止重复加载
    }
  });
}

// 监听滚动事件
window.addEventListener('scroll', lazyLoad);

// 页面加载完成时执行一次
document.addEventListener('DOMContentLoaded', lazyLoad);

登录后复制

这个方法虽然简单，但效率相对较低，每次滚动都会遍历所有图片。

使用getBoundingClientRect优化判断

getBoundingClientRect方法可以获取元素相对于视口的位置信息，避免了计算offsetTop和scrollY的麻烦，也更准确。

function lazyLoad() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top <= window.innerHeight && rect.bottom >= 0 &&
        rect.left <= window.innerWidth && rect.right >= 0) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', lazyLoad);
document.addEventListener('DOMContentLoaded', lazyLoad);

登录后复制

这种方法相对更高效，因为getBoundingClientRect是浏览器原生方法，性能较好。

利用Intersection Observer API实现

Intersection Observer API是专门为监听元素可见性而设计的，性能更高，也更简洁。

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img); // 停止监听已加载的图片
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

登录后复制

Intersection Observer API的优势在于它是异步的，不会阻塞主线程，而且可以设置阈值，控制图片在进入可视区域多少比例时才加载。

结合requestAnimationFrame优化滚动事件处理

度加剪辑
度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

频繁的滚动事件处理可能会导致页面卡顿。使用requestAnimationFrame可以将滚动事件处理函数推迟到下一次浏览器重绘之前执行，从而提高性能。
```
let ticking = false;

function lazyLoad() {
  if (!ticking) {
    requestAnimationFrame(function() {
      // 上面的懒加载逻辑
      ticking = false;
    });
    ticking = true;
  }
}

window.addEventListener('scroll', lazyLoad);
document.addEventListener('DOMContentLoaded', lazyLoad);
```
登录后复制
requestAnimationFrame可以确保动画流畅，避免掉帧。

图片懒加载如何处理SEO优化？

懒加载虽然提升了用户体验，但也可能影响SEO。搜索引擎爬虫可能无法执行JavaScript，导致无法加载所有图片。解决办法：

使用<noscript>标签提供备用图片： 在<img>标签中使用<noscript>标签，当JavaScript不可用时，显示备用图片。
```
<img  alt="Image Description">
<noscript><img src="image.jpg" alt="Image Description"></noscript>
```
登录后复制
使用服务器端渲染（SSR）： 在服务器端渲染页面，确保搜索引擎爬虫可以获取完整的HTML内容，包括所有图片。
使用Google推荐的懒加载方式： Google推荐使用loading="lazy"属性，这是一个浏览器原生的懒加载属性，搜索引擎可以识别。
```
<img src="image.jpg" loading="lazy" alt="Image Description">
```
登录后复制

如何处理懒加载图片的占位问题？

在图片加载完成之前，需要为图片预留空间，避免页面布局发生跳动。常见的做法：

使用固定宽高： 为<img>标签设置固定的宽度和高度。
使用CSS aspect-ratio属性： 设置图片的宽高比，让浏览器自动计算高度。
```
img {
  aspect-ratio: 16 / 9; /* 设置宽高比 */
  object-fit: cover; /* 图片填充方式 */
}
```
登录后复制
使用占位符图片： 使用低分辨率的占位符图片，在图片加载完成后替换为高清图片。