一、懒加载原理
1.1 图片占位符
1.2 监听滚动事件
二、Vue图片懒加载实现方式
2.1 使用Vue内置指令
<template>
<img v-lazy="imageSrc" alt="描述">
</template>
<script>
export default {
data() {
return {
imageSrc: 'path/to/image.jpg'
};
}
};
</script>
2.2 使用第三方库
2.2.1 安装
npm install vue-lazyload
2.2.2 使用
<template>
<img v-lazy="imageSrc" alt="描述">
</template>
<script>
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload);
export default {
data() {
return {
imageSrc: 'path/to/image.jpg'
};
}
};
</script>
2.3 自定义指令
如果需要更灵活的懒加载功能，可以自定义一个Vue指令。
<template>
<img v-lazyload="imageSrc" alt="描述">
</template>
<script>
export default {
directives: {
lazyload: {
inserted: function(el, binding) {
const imageSrc = binding.value;
const img = new Image();
img.src = imageSrc;
img.onload = () => {
el.src = imageSrc;
};
}
}
},
data() {
return {
imageSrc: 'path/to/image.jpg'
};
}
};
</script>