引言
图片加载原理
- 图片加载缓慢，导致页面渲染延迟。
- 大图直接加载，占用过多带宽。
- 图片未按需加载，影响页面性能。
图片懒加载
实现方法
Vue提供了几种实现懒加载的方法：
- 使用Vue的指令
v-lazyVue社区中有一个名为vue-lazyload的指令，可以方便地实现图片的懒加载。
<template>
<div>
<img v-lazy="imageSrc" alt="描述">
</div>
</template>
<script>
import Vue from 'vue';
import Lazyload from 'vue-lazyload';
Vue.use(Lazyload);
</script>
- 使用Intersection Observer API 这是现代浏览器提供的一个API，可以用来检测元素是否进入了视窗。
<template>
<div>
<img :data-src="imageSrc" alt="描述">
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', () => {
const lazyImages = [].slice.call(document.querySelectorAll('img[data-src]'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(lazyImage => {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for browsers that don't support IntersectionObserver
lazyImages.forEach(lazyImage => {
lazyImage.src = lazyImage.dataset.src;
});
}
});
</script>