js实现懒加载图片
实现懒加载图片的基本原理
懒加载（Lazy Load）是一种优化网页性能的技术，通过延迟加载非视口内的图片，减少页面初始加载时的资源请求。核心原理是监听滚动事件，判断图片是否进入可视区域，再动态设置图片的src属性。
Intersection Observer API 实现
现代浏览器推荐使用IntersectionObserver API，性能优于传统滚动事件监听：
document.addEventListener('DOMContentLoaded', () => {
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => observer.observe(img));
});HTML结构需配合data-src属性：
<img data-src="actual-image.jpg" alt="Lazy loaded image">传统滚动事件实现
兼容旧浏览器的方案，需手动计算元素位置：
function lazyLoad() {
const lazyImages = document.querySelectorAll('img[data-src]');
const windowHeight = window.innerHeight;
lazyImages.forEach(img => {
const rect = img.getBoundingClientRect();
if (rect.top < windowHeight + 100) { // 提前100px加载
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
document.addEventListener('DOMContentLoaded', lazyLoad);
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);优化建议
添加加载占位图和错误处理：
<img data-src="image.jpg" src="placeholder.jpg"
onerror="this.src='fallback.jpg'">使用loading="lazy"原生属性作为降级方案（现代浏览器支持）：
<img src="image.jpg" loading="lazy" alt="Native lazy loading">注意事项
- 初始加载时需立即执行一次检测函数
- 滚动事件建议使用节流（throttle）优化性能
- 移除已加载图片的事件监听减少计算量
- 移动端需考虑视口缩放和横屏情况
