js实现图片的懒加载
实现图片懒加载的基本原理
懒加载的核心思想是延迟加载非视口内的图片，当用户滚动页面时再动态加载即将进入视口的图片资源。这能显著减少页面初始加载时的网络请求和带宽消耗。
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="description">传统滚动事件实现
兼容旧浏览器的方案需要监听滚动事件并手动计算位置：
function lazyLoad() {
const lazyImages = document.querySelectorAll('img[data-src]');
lazyImages.forEach(img => {
const rect = img.getBoundingClientRect();
if (rect.top < window.innerHeight + 200) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}
document.addEventListener('DOMContentLoaded', lazyLoad);
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);性能优化建议
添加200像素的预加载区域可提升用户体验，避免滚动时出现空白。考虑使用requestIdleCallback或throttle优化滚动事件触发频率。
加载状态可视化
可添加加载动画增强用户体验：
img[data-src] {
background: #eee url(loading.gif) no-repeat center;
}注意事项
确保图片有固定宽高或使用aspect-ratio CSS属性，避免布局偏移。对于SEO关键图片，可考虑服务器端渲染首屏内容。
