js实现图片的懒加载
实现原理
图片懒加载的核心原理是延迟加载非视口内的图片，当用户滚动页面时，动态将占位符替换为真实图片。通过监听滚动事件或使用Intersection Observer API判断图片是否进入可视区域。
传统滚动监听方式
// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('img[data-src]');
// 滚动事件处理函数
function lazyLoad() {
lazyImages.forEach(img => {
if (img.getAttribute('data-loaded')) return;
const rect = img.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
img.src = img.getAttribute('data-src');
img.removeAttribute('data-src');
img.setAttribute('data-loaded', 'true');
}
});
}
// 初始加载可视区域图片
lazyLoad();
// 添加滚动事件监听
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);Intersection Observer API（推荐）
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.getAttribute('data-src');
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => {
observer.observe(img);
});HTML结构示例
<img data-src="path/to/real-image.jpg" src="path/to/placeholder.jpg" alt="description">性能优化建议
添加防抖函数减少scroll事件触发频率
function debounce(fn, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(fn, delay);
};
}
window.addEventListener('scroll', debounce(lazyLoad, 200));为未加载图片添加加载动画或占位背景
img[data-src] {
background: #f0f0f0;
min-height: 200px;
}兼容性处理
对于不支持Intersection Observer的浏览器，可回退到传统方法
if ('IntersectionObserver' in window) {
// 使用Observer API
} else {
// 使用传统滚动监听
}
