j*ascript的懒加载是什么_如何实现图片懒加载？

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

j*ascript的懒加载是什么_如何实现图片懒加载？

2025-12-15

浏览次数：次

返回列表

懒加载是“用到再加载”的网页性能优化技术，核心是图片进入可视区时才加载；推荐用Intersection Observer API实现，兼容方案可用节流的scroll+getBoundingClientRect；需避免影响首屏关键图并处理加载失败。

javascript的懒加载是什么_如何实现图片懒加载？

懒加载是一种优化网页性能的技术，核心思想是“用到再加载”——图片或其他资源在进入可视区域时才开始请求和渲染，而不是页面一打开就全部加载。这样能减少初始请求量、节省带宽、加快首屏渲染速度，尤其对长列表或含大量图片的页面效果明显。

图片懒加载的关键原理

判断图片是否即将进入用户视野，主要依赖浏览器提供的 Intersection Observer API（推荐）或监听 scroll/resize 事件 + getBoundingClientRect() 计算位置。现代方案优先用 Intersection Observer，它性能更好、写法更简洁，且原生支持监听页面内元素与视口的交叉状态。

用 Intersection Observer 实现懒加载（推荐）

步骤很简单：给图片的 src 暂存到自定义属性（如 data-src），初始用占位图或空白；用 Intersection Observer 监听图片元素，一旦进入视口，就把 data-src 的值赋给 src，触发加载。

HTML 中标记懒加载图片：<img src="placeholder.jpg" alt="描述" class="lazy">
JS 初始化观察器，设置阈值（比如提前 100px 开始加载）：const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy'); io.unobserve(img); } }); }, { threshold: 0.01, rootMargin: '100px' });
遍历所有 .lazy 图片并开始观察：document.querySelectorAll('.lazy').forEach(img => io.observe(img));

兼容旧浏览器的降级方案（scroll + getBoundingClientRect）

如果需支持 IE 或老版本安卓浏览器，可用滚动监听配合位置计算。但要注意节流（如用 requestAnimationFrame 或 setTimeout 防抖），否则频繁触发影响性能。

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

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

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

获取图片相对于视口的顶部距离：const rect = img.getBoundingClientRect(); const isInView = rect.top 0;
滚动时批量检查可见图片，只对符合条件的加载，并移除监听或标记已处理
记得在图片加载成功后绑定 onload，失败时可 fallback 到占位图或错误提示

额外优化建议

懒加载不是万能的，搭配其他手段效果更佳：

使用 loading="lazy" 属性（原生懒加载）：现代浏览器已支持，可直接启用，适合基础场景，但可控性不如 JS 方案
结合 srcset 和 sizes 做响应式图片，让不同设备加载合适尺寸
为懒加载图片添加简单 CSS 过渡（如淡入），提升视觉体验：img { opacity: 0; transition: opacity 0.3s; } img.loaded { opacity: 1; }
避免对关键首屏图片使用懒加载（比如 banner 图），否则可能影响 LCP 等核心指标