JavaScript如何实现图片懒加载_JavaScript图片懒加载原理与代码实现方法-js教程-PHP中文网

JavaScript如何实现图片懒加载_JavaScript图片懒加载原理与代码实现方法

星夢妙者

发布： 2025-11-04 11:54:02

原创

988人浏览过

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

javascript如何实现图片懒加载_javascript图片懒加载原理与代码实现方法

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

图片懒加载的基本原理

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

主要流程如下：

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

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

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

立即学习“Java免费学习笔记（深入）”；

Modoer多功能点评系统2.5 精华版 Build 20110710 GBK

Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步旗舰版系统框架2.增加限制图片

查看详情

// 获取所有需要懒加载的图片
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  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 < 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); });