图片懒加载通过延迟加载非可视区域图片来提升性能，具体做法是将真实图片地址存于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 结构：
@@##@@
二、传统方法：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);});
优点：
性能高，不占用主线程 语法简洁，逻辑清晰 自动处理滚动、resize 等场景
注意：部分旧版浏览器（如 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如何实现图片懒加载_JavaScript图片延迟加载优化与实现方法详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1537541.html
微信扫一扫 
支付宝扫一扫 
