vue3中的图片懒加载指令及全局注册
最近重新刷了一遍黑马的小兔鲜前端项目,发现有个懒加载的指令之前还没有用过。而且写法相对固定,因此记录一下
首先,懒加载(Lazy Loading)的作用是延迟加载某些资源或组件,直到需要它们的时候再进行加载。这种技术通常用于优化性能和资源利用率,特别是在处理大量数据或复杂的应用程序中。通过懒加载,可以减少初始加载时间和资源消耗,提升用户体验,同时在需要时动态加载内容,避免不必要的加载和占用内存,通常用在处理前端图片时。
举个例子,我们在逛淘宝时,浏览某个页面时,不需要一下子就加载所有的商品图片,一是资源浪费,二是影响效率。通常是刷到哪,就什么时候加载资源,这里就用到了图片的懒加载。
一、安装使用vueUse
安装指令:
npm i @vueuse/core
找到监视页面视口的方法:
useIntersectionObserver
其作用是监视页面上某个元素当前是不是可见的
具体用法参见文档
二、编写指令方法
一般vue项目中的全局指令方法都写在src的directives文件夹下,创建index.js文件,注册以下指令
// 定义懒加载插件
import { useIntersectionObserver } from "@vueuse/core";
export const lazyPlugin = {
install(app) {
// 懒加载指令逻辑
app.directive("img-lazy", {
mounted(el, binding) {
// el: 指令绑定的那个元素 img
// binding: binding.value 指令等于号后面绑定的表达式的值 图片url
// console.log(el, binding.value);
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
// console.log(isIntersecting);
if (isIntersecting) {
// 进入视口区域
el.src = binding.value;
stop();
}
});
},
});
},
};
三、全局注册懒加载指令
在项目入口文件main.js中注册指令
import { lazyPlugin } from '@/directives'
const app = createApp(App)
app.use(lazyPlugin)
四、组件中使用懒加载指令
<template>
<HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
<ul class="goods-list">
<li v-for="item in hotList" :key="item.id">
<RouterLink to="/">
<img v-img-lazy="item.picture" alt="">
<p class="name">{{ item.title }}</p>
<p class="desc">{{ item.alt }}</p>
</RouterLink>
</li>
</ul>
</HomePanel>
</template>
img标签中的的v-img-lazy指令就是懒加载指令,这是vue项目的一般写法,在指令前添加v-即可
看看效果:
当页面刷到人气推荐时,加载了四张新的图片