js实现懒加载图片
懒加载图片的实现方法
懒加载（Lazy Load）是一种优化网页性能的技术，通过延迟加载图片直到它们进入视口（viewport）或接近视口时才加载，减少初始页面加载时间。
方法一：Intersection Observer API
Intersection Observer API 是浏览器原生提供的 API，用于异步监听目标元素与祖先元素或视口的交叉状态。
document.addEventListener('DOMContentLoaded', function() {
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));
});HTML 结构示例：
<img data-src="path/to/image.jpg" alt="Lazy loaded image">方法二：滚动事件监听
对于不支持 Intersection Observer 的旧浏览器，可以使用滚动事件监听实现类似效果。
function lazyLoad() {
const lazyImages = document.querySelectorAll('img[data-src]');
lazyImages.forEach(img => {
if (img.getBoundingClientRect().top <= window.innerHeight + 100) {
img.src = img.dataset.src;
}
});
}
document.addEventListener('DOMContentLoaded', lazyLoad);
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);方法三：使用 loading="lazy" 属性
现代浏览器支持原生懒加载，只需添加 loading 属性即可：
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">性能优化建议
- 为懒加载图片设置占位符（如低质量占位图或纯色背景）
- 添加过渡动画提升用户体验
- 考虑使用 CSS 的
object-fit属性保持图片比例 - 对于大量图片，考虑分批加载
注意事项
- 确保懒加载图片有适当的尺寸属性（width/height）避免布局偏移
- 移动端需要特别考虑网络条件和性能
- 搜索引擎优化（SEO）方面，确保懒加载内容能被爬虫正确索引
