图片懒加载通过延迟加载非可视区域图片来提升性能，具体做法是将真实图片地址存于data-src属性，当图片接近视口时再赋值给src。传统方法使用scroll事件结合getBoundingClientRect判断位置，需节流优化性能；现代方案推荐Intersection Observer API，异步监听元素可见性，性能更高且语法简洁。配合rootMargin预加载、占位图防抖动及css淡入动画可进一步优化体验，优先选用Intersection Observer并考虑兼容性降级处理。
图片懒加载是一种优化网页性能的常用技术，核心思路是延迟加载可视区域外的图片，只有当用户滚动页面、图片即将进入视口时才开始加载。这样可以减少初始页面加载时间、降低带宽消耗、提升用户体验。javaScript 提供了多种方式来实现这一功能。
一、基本原理与实现思路
图片懒加载的关键在于：不直接将真实图片地址写在 src 属性中，而是先用一个占位图或空白代替，真实地址存放在自定义属性（如 data-src）中。当图片元素接近或进入浏览器视口时，再通过 javascript 将 data-src 的值赋给 src，触发图片加载。
实现步骤如下：
- html 中使用
data-src存储真实图片路径 - 监听滚动事件或使用 Intersection Observer 监听元素是否可见
- 一旦图片进入可视范围，替换
src并可选地移除监听以避免重复执行
示例 HTML 结构：
<img class="lazy" src="/images/placeholder.png" alt="示例图片">
二、传统方法：scroll + getBoundingClientRect
通过监听 window.onscroll 事件，并结合 getBoundingClientRect() 判断元素是否进入视口。
立即学习“Java免费学习笔记（深入）”；
代码实现：
function lazyLoad() { const images = document.querySelectorAll('img.lazy'); const windowHeight = window.innerHeight; images.forEach(img => { const rect = img.getBoundingClientRect(); // 图片顶部距离视口顶部小于窗口高度，且尚未加载 if (rect.top <= windowHeight && !img.src.includes(img.dataset.src)) { img.src = img.dataset.src; img.classlist.remove('lazy'); // 可选：标记已加载 } }); } // 初始化调用一次，防止首屏图片未触发滚动 lazyLoad(); window.addEventListener('scroll', lazyLoad);
优点：兼容性好，支持老版本浏览器。
缺点：频繁触发 scroll 事件可能影响性能，建议配合节流（throttle）优化。
加入节流处理：
function throttle(fn, delay) { let flag = true; return function () { if (!flag) return; flag = false; setTimeout(() => { fn.apply(this, arguments); flag = true; }, delay); }; } window.addEventListener('scroll', throttle(lazyLoad, 100));
三、现代推荐方案：Intersection Observer API
Intersection Observer 是浏览器提供的原生 API，用于异步监听元素与视口的交叉状态，无需手动计算位置，性能更优。
实现代码：
const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy'); observer.unobserve(img); // 加载后停止监听 } }); }); // 观察所有懒加载图片 document.querySelectorAll('img.lazy').forEach(img => { observer.observe(img); });
优点：
注意：部分旧版浏览器（如 IE）不支持，需考虑降级方案或引入 polyfill。
四、优化建议与最佳实践
为了获得更好的用户体验和性能表现，可以结合以下技巧：
- 提前加载临近图片：设置 rootMargin 扩大观察区域，例如
{ rootMargin: '50px' }，让图片在进入视口前就开始加载 - 使用占位符或低质量图像占位（LQIP）：避免页面跳动，提升感知性能
- 图片加载完成后添加淡入动画：通过 CSS 过渡提升视觉体验
- 服务端配合响应式图片：使用
srcset和sizes提供合适分辨率的图片
CSS 示例（平滑显示）：
img.lazy { opacity: 0.5; transition: opacity 0.3s ease-in; } img:not(.lazy) { opacity: 1; }
基本上就这些。根据项目需求选择合适的实现方式，优先推荐使用 Intersection Observer 配合节流和占位策略，兼顾性能与体验。
以上就是js如何实现图片