当前位置：首页 > 文章列表 > 文章 > 前端 > 手把手教你用JS实现图片懒加载，3种方案提升网页加载速度超简单！

手把手教你用JS实现图片懒加载，3种方案提升网页加载速度超简单！

2025-06-21 11:32:15 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《JS实现图片懒加载！3种方案优化网页加载速度超简单》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

图片懒加载通过延迟加载非首屏图片提升页面性能。具体方案有三种：1.基于scroll事件监听，通过判断图片是否进入视窗加载图片，但需优化触发频率；2.使用Intersection Observer API实现异步监听，性能更优；3.使用loading="lazy"属性原生支持。此外，占位图应与实际图片尺寸一致并采用低质量图片或CSS渐变设计。加载失败时应显示默认图、支持重试及错误提示，并监控上报错误。对SEO影响方面，应确保搜索引擎可抓取图片，合理使用alt属性并配合CDN加速。

JS如何实现图片懒加载优化 3种图片懒加载方案提升网页加载速度

图片懒加载，简单来说，就是先不加载那些不在用户当前视窗内的图片，等到它们快要进入视窗时再加载。这样做可以大幅减少页面初始加载时的HTTP请求数量，加快页面渲染速度，提升用户体验。

解决方案

实现图片懒加载的核心思路就是：延迟加载。具体来说，就是先把标签的src属性设置为空，然后将真实的图片地址放到一个自定义属性中，比如data-src。当页面滚动时，通过JavaScript判断图片是否进入视窗，如果进入，就把data-src的值赋给src，这样图片就开始加载了。

这里提供三种常用的实现方案：

基于scroll事件监听

这是最传统的做法。监听window的scroll事件，每次滚动时都检查是否有图片进入视窗。

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

function lazyLoad() {
  images.forEach(img => {
    if (isInViewport(img) && img.dataset.src) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src'); // 防止重复加载
    }
  });
}

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

// 页面加载完成时执行一次，防止首屏图片未加载
lazyLoad();

window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad); // 监听resize事件，防止窗口大小变化导致图片显示问题

这种方案的缺点是scroll事件触发频率很高，如果页面图片很多，会频繁执行lazyLoad函数，可能导致性能问题。可以考虑使用throttle或debounce来优化。

使用Intersection Observer API

这是更现代、更高效的方案。Intersection Observer可以监听元素是否进入视窗，而且是异步的，不会阻塞主线程。

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

const observer = new IntersectionObserver((entries) => {
  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);
});

这种方案的优点是性能更好，而且代码更简洁。

配合loading="lazy"属性
现代浏览器已经原生支持loading="lazy"属性，可以直接在标签上使用，无需编写任何JavaScript代码。
```
<img data-src="image.jpg" loading="lazy" alt="Image">
```
这种方案最简单，但兼容性可能存在问题，需要根据实际情况选择。