J*aScript如何实现图片懒加载_J*aScript图片懒加载原理与代码实现方法

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

发布时间：2025-11-04

点击量：

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

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

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

图片懒加载的基本原理

实现懒加载的关键在于判断图片是否进入视口（可视区域）。通过监听滚动事件或使用现代浏览器提供的 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 结构示例：

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

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

2 查看详情 Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8

@@##@@

方法二：传统 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); });

优化建议与注意事项

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

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

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

以上就是J*aScript如何实现图片懒加载_J*aScript图片懒加载原理与代码实现方法的详细内容，更多请关注其它相关文章！

上一篇：CSS定位元素的偏移量支持百分比吗_计算规则与布局实践

下一篇：JS函数定义怎么操作_JS函数定义与调用方式完整指南