js怎么实现懒加载图片 js图片懒加载的4种优化技巧介绍-js教程-PHP中文网

js怎么实现懒加载图片 js图片懒加载的4种优化技巧介绍

冰火之心

发布： 2025-06-29 21:11:01

原创

138人浏览过

图片懒加载的核心实现方法有三种：1. 使用 data-src 属性 + 滚动监听；2. 使用 intersection observer api；3. 结合 requestanimationframe 优化滚动监听。此外，还可通过设置 offset 或 rootmargin 实现预加载，选择合适的占位图优化体验，并通过 onerror 处理加载失败问题，测试时可通过开发者工具的 network 面板观察图片是否按需加载。

js怎么实现懒加载图片 js图片懒加载的4种优化技巧介绍

图片懒加载，简单来说，就是让页面上的图片不是一次性全部加载，而是等到它们进入用户视口（或者即将进入）时才加载。这样可以显著提高页面初始加载速度，优化用户体验，特别是对于图片较多的页面。

解决方案

实现懒加载的核心在于：监听图片的 src 属性，当图片进入视口时，才将真实的图片地址赋给 src。

基础实现：data-src 属性 + 滚动监听

这是最常见的做法。首先，将图片的真实地址放到 data-src 属性中，src 属性留空或者放一张占位图。

@@##@@
@@##@@
@@##@@

登录后复制

然后，通过 JavaScript 监听滚动事件，判断图片是否进入视口。

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

function loadImage(img) {
  img.src = img.dataset.src;
  img.removeAttribute('data-src'); // Optional: Remove data-src after loading
}

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

function checkImages() {
  images.forEach(img => {
    if (isElementInViewport(img)) {
      loadImage(img);
    }
  });
}

document.addEventListener('scroll', checkImages);
window.addEventListener('resize', checkImages); // Also check on resize
checkImages(); // Initial check

登录后复制

这种方法简单直接，但缺点是需要频繁监听滚动事件，可能会影响性能。

使用 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;
      loadImage(img);
      observer.unobserve(img); // Stop observing after loading
    }
  });
});

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

function loadImage(img) {
  img.src = img.dataset.src;
  img.removeAttribute('data-src');
}

登录后复制

Intersection Observer API 性能更好，推荐使用。

结合 requestAnimationFrame 优化滚动监听

如果选择使用滚动监听，可以结合 requestAnimationFrame 来降低滚动事件的处理频率，提高性能。
```
let ticking = false;

document.addEventListener('scroll', function(e) {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      checkImages();
      ticking = false;
    });
    ticking = true;
  }
});
```
登录后复制
requestAnimationFrame 保证了回调函数在浏览器重绘之前执行，避免了不必要的计算。

预加载机制

有时候，我们希望图片在进入视口之前就开始加载，这样可以避免用户看到图片加载过程。可以在 isElementInViewport 函数中增加一个 offset 值。

function isElementInViewport(el, offset = 100) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= -offset &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + offset &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

登录后复制

或者，使用 Intersection Observer API 的 rootMargin 选项。

const observer = new IntersectionObserver((entries, observer) => { ... }, {
  rootMargin: '100px 0px' // Top and bottom margins
});

登录后复制

rootMargin 可以控制触发 Intersection Observer 的边界。

如何选择合适的占位图？

选择占位图需要考虑以下几个因素：

大小： 占位图应该尽可能小，避免增加初始加载时间。可以使用纯色背景或者矢量图。
尺寸： 占位图的尺寸应该和真实图片的尺寸接近，避免页面布局跳动。
风格： 占位图的风格应该和页面整体风格一致，避免突兀感。
颜色： 可以使用图片的平均颜色作为占位图的颜色，或者使用模糊处理后的图片作为占位图。

一些常用的占位图方案包括：

纯色背景： 使用和图片主题颜色相近的纯色背景。
矢量图： 使用简单的矢量图形作为占位图。
LQIP (Low Quality Image Placeholder)： 使用极低质量的图片作为占位图。
SQIP (SVG-Based Image Placeholder)： 使用 SVG 版本的图片作为占位图。

懒加载图片加载失败了怎么办？

图片懒加载过程中，可能会因为网络问题或者其他原因导致图片加载失败。为了提高用户体验，需要处理图片加载失败的情况。

显示默认图片： 当图片加载失败时，显示一张默认图片。可以使用 onerror 事件来监听图片加载失败。
```
@@##@@
```
登录后复制
重试加载： 可以尝试重新加载图片。可以使用 setTimeout 函数来延迟一段时间后重新加载。
```
img.onerror = function() {
  setTimeout(() => {
    img.src = img.dataset.src;
  }, 3000); // Retry after 3 seconds
};
```
登录后复制
错误提示： 可以显示错误提示信息，告诉用户图片加载失败。