图片懒加载通过延迟加载非首屏图片提升性能，核心是利用Intersection Observer或scroll事件检测图片进入视口后，将data-src赋值给src以加载真实图片，推荐使用Intersection Observer以提升效率。
图片懒加载是一种优化网页性能的常用技术，核心思路是延迟加载非首屏图片，只有当用户滚动页面、图片即将进入可视区域时，才真正加载其内容。这样可以减少初始页面加载时间、降低资源消耗，提升用户体验。
图片懒加载的基本原理
实现懒加载的关键在于判断图片是否进入视口（可视区域）。通过监听滚动事件或使用现代浏览器提供的 Intersection Observer API，我们可以检测到图片元素何时接近可见状态，然后将占位图片（如透明图）的 src 替换为真实的图片地址。
主要流程如下：
页面初始化时，真实图片地址存储在自定义属性中（如 data-src）图片标签的 src 指向一个默认占位图或空白图当图片元素进入视口范围，读取 data-src 赋值给 src，触发真实图片加载可配合加载完成后的处理（如添加淡入效果）
方法一：使用 Intersection Observer（推荐）
这是现代浏览器推荐的方式，性能更好，不会频繁触发重绘或布局计算。
立即学习“Java免费学习笔记（深入）”；
度加剪辑
度加剪辑（原度咔剪辑），百度旗下AI创作工具
63 查看详情
// 获取所有需要懒加载的图片const lazyImages = document.querySelectorAll('img[data-src]');// 创建观察器实例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); // 停止观察该元素}});});
// 开始观察每一张图片lazyImages.forEach(img => {imageObserver.observe(img);});
HTML 结构示例：
方法二：传统 scroll 事件监听（兼容性好）
适用于不支持 Intersection Observer 的旧浏览器。通过监听页面滚动，判断图片位置是否进入视口。
function lazyLoadImages() { const images = document.querySelectorAll('img[data-src]'); const viewportHeight = window.innerHeight; const scrollTop = window.pageYOffset;images.forEach(img => {// 图片距离文档顶部的总距离const offsetTop = img.offsetTop;
// 如果图片位置在视口下方一定范围内（预留缓冲区）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注意及时解绑已加载图片的监听或观察，避免内存泄漏
基本上就这些。懒加载不复杂但容易忽略细节，合理使用能显著提升网页响应速度。
以上就是JavaScript如何实现图片懒加载_JavaScript图片懒加载原理与代码实现方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/289567.html
微信扫一扫 
支付宝扫一扫 
