图片懒加载(Lazy Loading)是一种优化网页加载性能的技术。它的基本原理是,当页面加载时,图片等资源不会立即加载,而是在用户即将滚动到这些资源时才开始加载。这样可以减少初始页面加载的时间,提高页面性能,特别是在包含大量图片的页面上。
实现方式
1. 使用 Intersection Observer API
Intersection Observer API
是现代浏览器提供的一种工具,专门用于检测元素是否进入了视口。它是懒加载的一种高效实现方式。
示例代码:
html
<img data-src="image.jpg" alt="Lazy loaded image" class="lazy-load" />
javascript
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll("img.lazy-load");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove("lazy-load");
observer.unobserve(img);
}
});
});
lazyImages.forEach(img => {
observer.observe(img);
});
});
data-src
:图片的实际地址被存储在data-src
属性中,而src
属性留空或设置为占位图片。IntersectionObserver
:用来监控图片元素是否进入视口(即entry.isIntersecting
为true
)。- 当图片进入视口时,将
data-src
的值赋给src
属性,从而触发图片的加载,并停止监控该图片元素(unobserve
)
2. 使用库或框架
许多现代前端框架和库(如 React、Vue、Angular 等)提供了懒加载的插件或组件,例如 React 的 react-lazyload
,Vue 的 vue-lazyload
。
3. 使用滚动事件 (scroll
)
这种方法通过监听 scroll
事件,每次用户滚动页面时检测图片是否进入视口。如果进入,则加载图片。
示例代码:
html
<img data-src="image.jpg" alt="Lazy loaded image" class="lazy-load" />
javascript
function lazyLoad() {
const lazyImages = document.querySelectorAll("img.lazy-load");
lazyImages.forEach(img => {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.src = img.dataset.src;
img.classList.remove("lazy-load");
}
});
}
window.addEventListener("scroll", lazyLoad);
解释:
getBoundingClientRect()
:返回元素的大小及其相对于视口的位置。window.innerHeight
:表示视口的高度。- 当图片的顶部位置(
top
)小于视口高度时,图片就已经进入视口,可以进行加载。
4. 使用 JavaScript 库
一些 JavaScript 库如 LazyLoad
、lozad.js
等,提供了更高级的懒加载功能和更好的浏览器兼容性。
使用 LazyLoad
库的示例:
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.1.3/lazyload.min.js"></script>
<img class="lazy" data-src="image.jpg" alt="Lazy loaded image">
<script>
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
});
</script>
解释:
LazyLoad
库自动处理图片懒加载,你只需添加lazy
类和data-src
属性。elements_selector
指定需要懒加载的元素(带有.lazy
类的图片)。
优势
- 提高页面性能:减少初始页面加载时间,特别是在包含大量图片或资源的页面上。
- 节省带宽:用户只会加载他们实际看到的图片,避免了不必要的流量消耗。
- 用户体验提升:页面会更快加载,减少白屏时间。
常见问题
- SEO 影响:对 SEO 可能有一定影响,因为搜索引擎爬虫可能无法加载懒加载的图片。使用合适的
alt
属性和逐步增强的技术可以缓解这一问题。 - 浏览器兼容性:虽然
Intersection Observer API
支持现代浏览器,但旧浏览器可能不支持,需要添加 polyfill 或使用其他实现方式。 - 闪烁问题:如果懒加载处理不当,用户滚动到图片时,图片可能会闪烁一瞬间。通过预加载低分辨率的占位符或调整
src
的加载时机可以减少这种情况。