当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript图片懒加载技巧与实现方法

JavaScript图片懒加载技巧与实现方法

2026-02-02 14:22:33 0浏览收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JavaScript图片懒加载实现方法》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

图片懒加载通过延迟加载非可视区图片提升性能，核心是用data-src存储真实路径，结合Intersection Observer监听进入视口时加载，推荐使用Observer API以提升效率并降低主线程负担。

javascript_如何实现图片懒加载

图片懒加载的核心思路是延迟加载页面中未进入可视区域的图片，等用户滚动到对应位置时再加载真实图片。这样可以减少初始页面加载时间、降低服务器压力、提升用户体验。

1. 基本原理：利用 data-src 占位

将真实的图片地址放在 data-src 属性中，src 先设置为空或占位图。当图片需要显示时，再把 data-src 的值赋给 src。

示例HTML结构：

<img class="lazy" data-src="path/to/real-image.jpg" src="placeholder.png" alt="描述">

2. 判断图片是否进入视口

通过 getBoundingClientRect() 方法判断元素是否出现在浏览器视窗内。

判断函数示例：

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= window.innerHeight &&
    rect.bottom >= 0
  );
}

3. 监听滚动事件并加载图片

在滚动时检查所有懒加载图片，如果进入视口，就将 data-src 赋值给 src，并移除监听避免重复触发。

实现代码：

const images = document.querySelectorAll('img.lazy');

function lazyLoad() {
  images.forEach(img => {
    if (isInViewport(img)) {
      img.src = img.dataset.src;
      img.classList.remove('lazy'); // 加载后移除类名
    }
  });
}

// 初始化调用一次（防止首屏图片不触发）
lazyLoad();

// 监听滚动和resize
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);

4. 提高性能：使用节流（throttle）

滚动事件频繁触发，建议加上节流避免性能问题。

简单节流实现：

function throttle(func, delay) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => inThrottle = false, delay);
    }
  };
}

window.addEventListener('scroll', throttle(lazyLoad, 100));

5. 使用 Intersection Observer（推荐方案）

现代浏览器推荐使用 Intersection Observer API，性能更好，无需手动计算位置。

优化版本：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img); // 加载完成后停止观察
    }
  });
});

// 观察所有懒加载图片
images.forEach(img => {
  if (img.classList.contains('lazy')) {
    observer.observe(img);
  }
});

这种方式更高效，不会影响主线程性能，是目前最主流的做法。

基本上就这些。用 data-src 存储真实路径，结合 Intersection Observer 实现监听，能有效实现图片懒加载。兼容性方面，如需支持老浏览器，可搭配 polyfill 或降级到 scroll 事件方案。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~