js如何实现懒加载
实现懒加载的方法
使用Intersection Observer API
Intersection Observer API是现代浏览器提供的原生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.dataset.src;
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => {
observer.observe(img);
});使用滚动事件监听
传统方法通过监听滚动事件，计算元素是否进入视口。虽然兼容性较好，但性能较差，需要手动优化。
function lazyLoad() {
const lazyImages = document.querySelectorAll('img[data-src]');
lazyImages.forEach(img => {
if (isInViewport(img)) {
img.src = img.dataset.src;
}
});
}
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top <= window.innerHeight &&
rect.bottom >= 0 &&
rect.left <= window.innerWidth &&
rect.right >= 0
);
}
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
window.addEventListener('load', lazyLoad);使用loading属性
HTML5新增的loading属性可直接实现原生懒加载，但需注意浏览器兼容性。
<img src="image.jpg" loading="lazy" alt="Lazy-loaded image">使用第三方库
常见懒加载库如lozad.js、lazysizes等，简化实现过程并提供额外功能。
// 使用lozad.js
const observer = lozad('.lozad', {
loaded: function(el) {
el.classList.add('loaded');
}
});
observer.observe();注意事项
- 确保设置合理的阈值（threshold）避免过早触发加载
- 对动态添加的内容需重新绑定观察器
- 移动端需考虑设备像素比（DPR）适配高清图
- 提供适当的占位符避免布局抖动
