图片懒加载通过延迟加载非可视区图片提升性能，核心是用data-src存储真实路径，结合Intersection Observer监听进入视口时加载，推荐使用Observer API以提升效率并降低主线程负担。
图片懒加载的核心思路是延迟加载页面中未进入可视区域的图片，等用户滚动到对应位置时再加载真实图片。这样可以减少初始页面加载时间、降低服务器压力、提升用户体验。
1. 基本原理：利用 data-src 占位
将真实的图片地址放在 data-src 属性中，src 先设置为空或占位图。当图片需要显示时，再把 data-src 的值赋给 src。
示例HTML结构：
@@##@@
2. 判断图片是否进入视口
通过 getBoundingClientRect() 方法判断元素是否出现在浏览器视窗内。
判断函数示例：
function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top = 0 );}
3. 监听滚动事件并加载图片
在滚动时检查所有懒加载图片，如果进入视口，就将 data-src 赋值给 src，并移除监听避免重复触发。
立即学习“Java免费学习笔记（深入）”；
实现代码：
const images = document.querySelectorAll('img.lazy');function lazyLoad() { images.forEach(img => { if (isInViewport(img)) { img.src = img.dataset.src; img.classList.remove('lazy'); // 加载后移除类名 } });}// 初始化调用一次（防止首屏图片不触发）lazyLoad();// 监听滚动和resizewindow.addEventListener('scroll', lazyLoad);window.addEventListener('resize', lazyLoad);
4. 提高性能：使用节流（throttle）
滚动事件频繁触发，建议加上节流避免性能问题。
简单节流实现：
function throttle(func, delay) { let inThrottle; return function() { if (!inThrottle) { func.apply(this, arguments); inThrottle = true; setTimeout(() => inThrottle = false, delay); } };}window.addEventListener('scroll', throttle(lazyLoad, 100));
5. 使用 Intersection Observer（推荐方案）
现代浏览器推荐使用 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); // 加载完成后停止观察 } });});// 观察所有懒加载图片images.forEach(img => { if (img.classList.contains('lazy')) { observer.observe(img); }});
这种方式更高效，不会影响主线程性能，是目前最主流的做法。
基本上就这些。用 data-src 存储真实路径，结合 Intersection Observer 实现监听，能有效实现图片懒加载。兼容性方面，如需支持老浏览器，可搭配 polyfill 或降级到 scroll 事件方案。
以上就是javascript_如何实现图片懒加载的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541452.html
微信扫一扫 
支付宝扫一扫 
