js如何实现懒加载
实现懒加载的基本原理
懒加载的核心思想是延迟加载非关键资源（如图片、视频等），直到它们进入或即将进入视口（viewport）时才加载。JavaScript通过监听滚动事件或使用Intersection Observer API实现。
方法一：基于滚动事件监听
通过监听页面滚动事件，计算目标元素与视口的相对位置，触发加载逻辑。
function lazyLoad() {
const lazyImages = document.querySelectorAll('img[data-src]');
lazyImages.forEach(img => {
const rect = img.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom >= 0) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
// 初始加载 + 滚动事件监听
window.addEventListener('load', lazyLoad);
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);关键点
- 使用
data-src存储真实URL，默认src为空或占位图。 getBoundingClientRect()获取元素相对于视口的位置。- 需结合防抖（debounce）优化性能。
方法二：使用Intersection Observer API
现代浏览器支持的API，性能更优，无需手动计算滚动位置。
document.addEventListener('DOMContentLoaded', () => {
const lazyTargets = document.querySelectorAll('[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = entry.target;
if (target.tagName === 'IMG') {
target.src = target.dataset.src;
} else {
target.style.backgroundImage = `url(${target.dataset.src})`;
}
observer.unobserve(target);
}
});
}, { threshold: 0.1 });
lazyTargets.forEach(target => observer.observe(target));
});参数说明
threshold: 0.1表示当元素10%进入视口时触发回调。- 支持图片、背景图等多种资源的懒加载。
方法三：原生HTML的loading="lazy"
现代浏览器（Chrome 77+）支持原生懒加载，无需JavaScript：
<img src="image.jpg" loading="lazy" alt="示例">注意事项
- 仅适用于
<img>和<iframe>。 - 兼容性需验证（可通过
'loading' in HTMLImageElement.prototype检测）。
性能优化建议
- 占位图：使用低分辨率占位图避免布局偏移。
- 预加载相邻资源：通过调整
threshold或提前加载视口附近的资源。 - 兼容性处理：对旧浏览器回滚到滚动事件方案。
通过上述方法可实现高效懒加载，显著提升页面加载性能。
