JavaScript图片懒加载原理及实现方法

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript图片懒加载原理与实现方法》，聊聊，希望可以帮助到正在努力赚钱的你。

图片懒加载通过延迟加载非首屏图片提升性能，核心是利用Intersection Observer或scroll事件检测图片进入视口后，将data-src赋值给src以加载真实图片，推荐使用Intersection Observer以提升效率。

图片懒加载是一种优化网页性能的常用技术，核心思路是延迟加载非首屏图片，只有当用户滚动页面、图片即将进入可视区域时，才真正加载其内容。这样可以减少初始页面加载时间、降低资源消耗，提升用户体验。

图片懒加载的基本原理

实现懒加载的关键在于判断图片是否进入视口（可视区域）。通过监听滚动事件或使用现代浏览器提供的 Intersection Observer API，我们可以检测到图片元素何时接近可见状态，然后将占位图片（如透明图）的 src 替换为真实的图片地址。

主要流程如下：

• 页面初始化时，真实图片地址存储在自定义属性中（如 data-src）
• 图片标签的 src 指向一个默认占位图或空白图
• 当图片元素进入视口范围，读取 data-src 赋值给 src，触发真实图片加载
• 可配合加载完成后的处理（如添加淡入效果）

方法一：使用 Intersection Observer（推荐）

这是现代浏览器推荐的方式，性能更好，不会频繁触发重绘或布局计算。

// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');
<p>// 创建观察器实例
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 设置真实图片地址
img.removeAttribute('data-src'); // 移除 data-src 防止重复加载
observer.unobserve(img); // 停止观察该元素
}
});
});</p><p>// 开始观察每一张图片
lazyImages.forEach(img => {
imageObserver.observe(img);
});</p>

HTML 结构示例：

<img data-src="path/to/real-image.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="懒加载图片">

方法二：传统 scroll 事件监听（兼容性好）

适用于不支持 Intersection Observer 的旧浏览器。通过监听页面滚动，判断图片位置是否进入视口。

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const viewportHeight = window.innerHeight;
  const scrollTop = window.pageYOffset;
<p>images.forEach(img => {
// 图片距离文档顶部的总距离
const offsetTop = img.offsetTop;</p><pre class="brush:php;toolbar:false;">// 如果图片位置在视口下方一定范围内（预留缓冲区）
if (offsetTop - scrollTop &lt; viewportHeight + 100) {
  img.src = img.dataset.src;
  img.removeAttribute('data-src');
}

}); }

// 初始执行一次 lazyLoadImages();

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

// 可选：防抖优化，避免频繁触发 let timer; window.addEventListener('scroll', () => { if (timer) clearTimeout(timer); timer = setTimeout(lazyLoadImages, 100); });

优化建议与注意事项

为了提升体验和性能，可以考虑以下几点：

• 给图片设置固定宽高，防止加载时页面跳动
• 使用 base64 编码的小图作为占位符，减少请求数
• 添加加载完成后的淡入动画，提升视觉流畅度
• 对于大量图片，优先使用 Intersection Observer
• 注意及时解绑已加载图片的监听或观察，避免内存泄漏

基本上就这些。懒加载不复杂但容易忽略细节，合理使用能显著提升网页响应速度。

理论要掌握，实操不能落！以上关于《JavaScript图片懒加载原理及实现方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！