图片懒加载
背景
电商类网站,图片会非常的多,而如果一上来就加载所有的图片,会导致网页加载很慢。
图片懒加载:等图片正式进入到可视区中时,才加载对应的图片,否则不请求图片
如何知道图片进入或者离开了可视区?
通过vueuse封装的useIntersectionObserver
写法:
const { stop } = useIntersectionObserver(target, 回调函数)
当target可见状态变化时,回调函数
例子:
import { useIntersectionObserver } from "@vueuse/core";
// const {stop} = useIntersectionObserver(要监听的dom,([{isIntersecting}])=>{
// 回调函数:当isIntersecting变化时:从可见->不可见 不可见->可见
// isIntersecting:当前可见
// })
// stop:停止监听
const imgRef = ref(null);
onMounted(() => {
const { stop } = useIntersectionObserver(imgRef.value,([{ isIntersecting }]) => {
console.log('是否进入',isIntersecting);
});
// setTimeout(()=>{
// console.log('停止监视');
// stop()
// },5000)
});
带入图片:
const imgRef = ref<null|HTMLImageElement>(null); //ref用于获取页面中元素时,有两个状态:1. 初始转态 Null2. 绑定后的状态
onMounted(() => {
const { stop } = useIntersectionObserver(imgRef.value,([{ isIntersecting }]) => {
console.log('是否进入',isIntersecting);
if(isIntersecting){
// imgRef.value?.src='https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg'
if(imgRef.value){
imgRef.value.src='https://yanxuan-item.nosdn.127.net/79f289a4e975fd030d5c37b98b9282c5.jpg'
// 停止监听
stop()
}
}
});
});
图片懒加载-封装自定义指令
自己封装指令 v-lazy,实现图片懒加载
- 创建一个自定义指令文件directives下的index.ts
// 自定义指令
// 自定义全局指令
import { App } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';
export default {
install(app: App) {
// 自定义全局指令
app.directive('lazy', {
// mounted是v3中自定义 指令的生命周期,它会被自动调用
// 它表示的涵义和组件的mounted是一致的
// el是dom元素,binding
mounted(el, binding) {
console.log('lazy', el, binding.value);
// 实时监听el是否可见 如果可见 给他的src 设置 binding.value
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
if (isIntersecting) {
el.src = binding.value
// 停止
stop()
}
});
}
})
}
}
- 在main.ts注册
import directives from './directives/index'
app.use(directives)
- 使用
图片懒加载理解思路