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

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

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

图片懒加载的关键原理

判断图片是否即将进入用户视野，主要依赖浏览器提供的 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 防抖），否则频繁触发影响性能。

标签： css javascript java html js 浏览器 安卓 懒加载 ssl win