懒加载通过延迟加载非关键资源提升性能，其核心是将图片真实地址存于data-src中，待进入视口时再赋值给src。传统实现依赖scroll事件和getBoundingClientRect判断可见性，但频繁触发影响性能；现代方案采用Intersection Observer API异步监听元素交叉状态，更高效流畅。除图片外，评论区、长列表等内容模块也可延迟加载，如滚动到底部时请求新数据实现无限滚动。注意事项包括：为旧浏览器引入Intersection Observer polyfill、设置图片容器固定尺寸防布局偏移、避免对首屏关键图片使用懒加载，并可结合原生loading="lazy"属性作为降级方案。合理应用懒加载能显著减少初始请求压力、节省带宽、提升用户体验。
页面加载速度直接影响用户体验，尤其当页面包含大量图片或内容时，一次性加载所有资源会显著拖慢首屏渲染。懒加载（Lazy Load）是一种优化技术，它让图片或内容在需要时才加载，比如进入视口才开始加载图片，从而减少初始请求压力、节省带宽、提升性能。
一、JavaScript 图片懒加载原理
图片懒加载的核心思想是：不直接将真实图片地址写在 src 属性中，而是先用一个占位图或空白代替，把真正的图片路径存放在自定义属性如 data-src 中。当图片元素即将进入可视区域时，再通过 JavaScript 将 data-src 的值赋给 src，触发图片加载。
示例代码：
<img class="lazy" alt="图片1"> <img class="lazy" alt="图片2">
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" 原生懒加载属性作为降级方案：
<img loading="lazy" src="xxx.jpg"> - 避免对首屏关键图片使用懒加载，以免影响核心体验
基本上就这些。合理使用懒加载，能让页面更轻快，用户感知更流畅。关键是根据业务场景选择合适的实现方式，优先考虑性能与兼容性的平衡。
