懒加载通过延迟加载非关键资源提升性能，其核心是将图片真实地址存于data-src中，待进入视口时再赋值给src。传统实现依赖scroll事件和getBoundingClientRect判断可见性，但频繁触发影响性能；现代方案采用Intersection Observer API异步监听元素交叉状态，更高效流畅。除图片外，评论区、长列表等内容模块也可延迟加载，如滚动到底部时请求新数据实现无限滚动。注意事项包括：为旧浏览器引入Intersection Observer polyfill、设置图片容器固定尺寸防布局偏移、避免对首屏关键图片使用懒加载，并可结合原生loading=”lazy”属性作为降级方案。合理应用懒加载能显著减少初始请求压力、节省带宽、提升用户体验。
页面加载速度直接影响用户体验，尤其当页面包含大量图片或内容时，一次性加载所有资源会显著拖慢首屏渲染。懒加载（Lazy Load）是一种优化技术，它让图片或内容在需要时才加载，比如进入视口才开始加载图片，从而减少初始请求压力、节省带宽、提升性能。
一、JavaScript 图片懒加载原理
图片懒加载的核心思想是：不直接将真实图片地址写在 src 属性中，而是先用一个占位图或空白代替，把真正的图片路径存放在自定义属性如 data-src 中。当图片元素即将进入可视区域时，再通过 JavaScript 将 data-src 的值赋给 src，触发图片加载。
示例代码：
@@##@@@@##@@
function lazyLoad() { const images = document.querySelectorAll('.lazy'); const viewportHeight = window.innerHeight; images.forEach(img => { const rect = img.getBoundingClientRect(); // 判断图片是否接近视口（提前 100px 加载） if (rect.top < viewportHeight + 100) { if (img.dataset.src) { img.src = img.dataset.src; img.classList.remove('lazy'); // 防止重复处理 } } });}// 页面加载和滚动时触发检测window.addEventListener('load', lazyLoad);window.addEventListener('scroll', lazyLoad);
上述代码使用 getBoundingClientRect() 获取元素相对于视口的位置，判断其是否进入可视范围。加上一定的提前量（+100px），可以提升用户体验，避免用户看到空白等待。
立即学习“Java免费学习笔记（深入）”；
二、使用 Intersection Observer 提升性能
传统方式绑定 scroll 事件可能导致频繁触发，影响性能。现代浏览器推荐使用 Intersection Observer API，它能异步监听元素与视口的交叉状态，性能更好。
优化后的懒加载实现：
const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; if (img.dataset.src) { img.src = img.dataset.src; img.classList.remove('lazy'); } observer.unobserve(img); // 加载后停止监听 } });});// 监听所有懒加载图片document.querySelectorAll('.lazy').forEach(img => { imageObserver.observe(img);});
这种方式无需手动计算位置，也不依赖 scroll 事件，浏览器会在合适时机通知回调，更加高效且流畅。
三、内容懒加载：延迟加载模块化区块
除了图片，网页中的评论区、长列表、广告模块等也可以采用懒加载。例如，某个“查看更多”按钮点击后才加载后续内容，或者某个模块进入视口才发起请求。
示例：滚动到底部加载更多内容
let page = 1;const container = document.getElementById('content-container');function loadMoreContent() { // 模拟异步请求 fetch(`/api/content?page=${page}`) .then(res => res.json()) .then(data => { if (data.length === 0) { window.removeEventListener('scroll', handleScroll); return; } data.forEach(item => { const div = document.createElement('div'); div.textContent = item.text; container.appendChild(div); }); page++; });}function handleScroll() { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; if (scrollTop + clientHeight >= scrollHeight - 50) { loadMoreContent(); }}window.addEventListener('scroll', handleScroll);loadMoreContent(); // 首次加载
这种“无限滚动”模式常见于社交动态、新闻流等场景，有效控制初始加载量。
四、注意事项与兼容性处理
对于不支持 Intersection Observer 的旧浏览器（如 IE），可引入 polyfill：Intersection Observer Polyfill图片容器应预设宽高，防止加载时布局跳动可结合 loading=”lazy” 原生懒加载属性作为降级方案：
基本上就这些。合理使用懒加载，能让页面更轻快，用户感知更流畅。关键是根据业务场景选择合适的实现方式，优先考虑性能与兼容性的平衡。
以上就是JS如何实现懒加载_JavaScript图片与内容懒加载实现方法教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538855.html
微信扫一扫 
支付宝扫一扫 
