图片懒加载的核心是延迟加载非视口内的图片，提升页面加载速度和用户体验；2. 推荐使用 intersectionobserver api 实现，通过将图片真实地址存于 data-src 属性，在元素即将进入视口时再赋值给 src 加载；3. 设置 rootmargin 可提前加载图片，避免内容突然“蹦出”；4. 对于不支持 intersectionobserver 的旧浏览器，可回退至监听 scroll 事件并结合 getboundingclientrect 和节流处理；5. 懒加载能显著减少首屏资源加载量，优化 fcp 和 lcp 指标，降低服务器带宽压力，提升 seo；6. 为避免布局偏移，应使用低分辨率图、模糊图或纯色背景作为占位符；7. 需监听 onerror 事件处理图片加载失败，替换为默认图或隐藏元素；8. 优先使用原生 loading=”lazy” 属性简化实现，但在需精细控制或处理背景图时仍需 javascript 方案；9. 背景图片懒加载需通过 javascript 动态修改 background-image 样式，逻辑与 img 懒加载类似。该方案兼顾性能、兼容性与用户体验，是现代前端优化的重要实践。
图片懒加载在JavaScript里，核心就是延迟加载那些当前不在用户视口范围内的图片。说白了，就是等用户快看到图片的时候，我们才去真正请求它、显示它。这能大幅提升页面加载速度和用户体验，尤其是在图片多的页面。
解决方案
实现图片懒加载，我个人最推荐的方案是使用
IntersectionObserver
API，它比传统的监听滚动事件要高效和优雅得多。
首先，HTML结构需要做一点小调整。我们不直接把图片地址放在
src
属性里，而是放在一个自定义属性，比如
data-src
。
@@##@@@@##@@
然后，JavaScript部分：
document.addEventListener('DOMContentLoaded', () => { const lazyImages = document.querySelectorAll('.lazyload-img'); // 检查浏览器是否支持 IntersectionObserver if ('IntersectionObserver' in window) { const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; // 将data-src赋值给src img.removeAttribute('data-src'); // 移除data-src属性，避免重复加载 observer.unobserve(img); // 停止观察已加载的图片 } }); }, { rootMargin: '0px 0px 100px 0px', // 在图片进入视口前100px时开始加载 threshold: 0 // 只要有一点点进入视口就触发 }); lazyImages.forEach(img => { observer.observe(img); // 观察所有需要懒加载的图片 }); } else { // Fallback for older browsers (e.g., using scroll event) // 这部分会相对复杂一些，需要监听scroll事件并计算getBoundingClientRect() // 但我个人觉得，现在IntersectionObserver的兼容性已经很好了， // 除非有非常严格的旧浏览器兼容需求，否则可以考虑简化或直接放弃这部分。 // 这里提供一个简化的回退逻辑，仅作示意： let active = false; const lazyLoad = () => { if (active === false) { active = true; setTimeout(() => { lazyImages.forEach(img => { if ((img.getBoundingClientRect().top = 0) && getComputedStyle(img).display !== 'none') { img.src = img.dataset.src; img.removeAttribute('data-src'); } }); active = false; }, 200); // 稍微延迟一下，减少计算频率 } }; window.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); window.addEventListener('orientationchange', lazyLoad); // 手机横竖屏切换 lazyLoad(); // 页面加载时立即检查一次 }});
这里有个小细节，
rootMargin
可以让你在图片进入视口前提前加载，用户体验会更顺滑，不会有图片突然“蹦”出来的感觉。
为什么图片懒加载对网站性能至关重要？
在我看来，图片懒加载不仅仅是一个技术优化，它更像是对用户耐心的一种尊重，以及对服务器资源的一种爱惜。你想啊，一个页面里有几十张甚至上百张图片，如果一股脑儿全加载了，那用户的浏览器得承受多大的压力？页面会卡顿，加载时间会变得异常漫长，甚至直接导致用户关闭页面。
从用户体验角度讲，快速的首次内容绘制（FCP）和大型内容绘制（LCP）是Google Core Web Vitals里非常看重的指标。懒加载能显著减少首次加载时需要处理的资源量，让用户更快看到页面的主要内容，这直接关系到用户对网站的第一印象。我个人就遇到过那种图片加载慢到怀疑人生的网站，体验真的差。
从服务器资源角度看，减少不必要的图片请求，也能有效降低服务器的带宽压力。特别是对于高流量的网站，这笔节省下来的资源开销是相当可观的。而且，现在搜索引擎对网站性能的权重越来越高，一个加载快的网站，在SEO上也会更有优势。
IntersectionObserver与传统滚动事件：我的一些思考和取舍
我刚开始接触懒加载的时候，确实也用过监听滚动事件加
getBoundingClientRect()
的方式。那种感觉，怎么说呢，就是“能用”，但总觉得有点笨重。特别是当页面元素很多，或者滚动事件触发频繁时，它会不断地进行DOM计算和重绘，导致页面卡顿，用户体验很不流畅。为了优化，我们还得引入节流（throttle）或防抖（debounce），代码一下子就复杂起来了。说实话，调试起来也挺让人头大的。
后来接触到
IntersectionObserver
，我简直觉得发现了新大陆。它真的是一个革命性的API，解决了传统方式的诸多痛点。它不是通过轮询（polling）来判断元素是否可见，而是当目标元素与根元素（通常是视口）发生交叉时，异步地通知你。这意味着浏览器可以在最佳时机执行回调，性能开销极小，几乎不会引起页面的卡顿。代码也变得简洁明了，可读性大大提升。
当然，
IntersectionObserver
也有它的兼容性问题，虽然现在主流浏览器支持度已经非常好了。但如果你真的需要支持那些“老掉牙”的浏览器，那传统的滚动事件加上节流/防抖，仍然是一个备选方案。只不过，在我看来，为了极少数的用户去维护一套复杂且性能不佳的代码，可能不是最划算的选择。很多时候，我们得学会在完美和实用之间找到一个平衡点。
除了基础实现，图片懒加载还有哪些值得考虑的细节？
聊到这里，可能有人会问，懒加载是不是就这么简单？其实不然，它还有一些进阶的玩法和值得注意的细节，能让你的懒加载方案更健壮、用户体验更好。
一个很常见的场景是占位符（Placeholder）。在图片加载出来之前，页面上总不能空着一块吧？这会影响布局稳定性，让用户觉得页面在“跳动”。我们可以用一个低分辨率的图片、一个模糊的图片（比如用CSS滤镜实现），或者一个纯色的背景来作为占位符。这样，图片加载完成后，会有一个平滑的过渡，用户体验会好很多。我个人比较喜欢用一个非常小的、经过压缩的低质量图片作为
src
，然后等
data-src
的高清图加载进来后替换掉。
再来就是错误处理。如果图片加载失败了怎么办？总不能让用户看到一个破碎的图片图标吧。我们可以在图片加载失败时（
onerror
事件），给它设置一个默认的“加载失败”图片，或者隐藏它。
img.onerror = () => { img.src = 'path/to/default-error-image.jpg'; // 或者 img.style.display = 'none';};
还有一个不得不提的，是现代浏览器自带的
loading="lazy"
属性。其实浏览器现在也挺智能的，很多时候我们甚至不用写JavaScript代码，直接在
img
标签上加上
loading="lazy"
属性，浏览器就会自动处理图片的懒加载。
@@##@@
这个属性的兼容性也在不断提升，它比JS方案更原生、性能更好。但它也有它的局限性，比如你可能需要更精细地控制加载时机（
rootMargin
），或者需要对背景图片进行懒加载时，JS方案依然是不可或缺的。所以，我的建议是：优先考虑
loading="lazy"
，如果不能满足需求，再考虑
IntersectionObserver
。两者结合使用，效果会更好。
最后，别忘了那些背景图片。CSS背景图片不能直接用
data-src
这种方式。对于背景图片的懒加载，通常需要通过JavaScript动态修改元素的
background-image
样式。这需要判断元素是否进入视口，然后动态添加一个CSS类或者直接修改
style
属性。这又是另一个小小的挑战了，但思路和图片懒加载是相通的。
以上就是js怎么实现图片懒加载的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513671.html
微信扫一扫 
支付宝扫一扫 
