梧州网站开发,C#如何做简易网站,推广普通话的手抄报,微信网页制作网站通过第三方插件VueUse实现图片懒加载。
1、需要安装依赖
npm i vueuse/core2、定义懒加载的插件
xxx/index.js
// useIntersectionObserver#xff1a;响应式监听目标元素的可见性。
import { useIntersectionObserver } from vueuse/core// 定义懒加载插件
export const …通过第三方插件VueUse实现图片懒加载。
1、需要安装依赖
npm i vueuse/core2、定义懒加载的插件
xxx/index.js
// useIntersectionObserver响应式监听目标元素的可见性。
import { useIntersectionObserver } from vueuse/core// 定义懒加载插件
export const lazyPlugin {install: (app) {/*定义全局指令img-lazy指令名称*/app.directive(img-lazy, {// 指令的定义mounted(el, binding) {/*el:指令绑定的那个元素 imgbinding:binding.value指令绑定的值*/const { stop } useIntersectionObserver(el,([{ isIntersecting }]) {// 如果是在当前视口下则赋值if (isIntersecting) {el.src binding.value;stop(); //图片加载完毕停止监听}},)}})},
}3、在main.js文件内注册指令
// 引入懒加载指令插件并注册
import { lazyPlugin } from /directives/indexapp.use(lazyPlugin)app.mount(#app)4、使用
注册好指令就可以在标签上使用使用指令时需要加v-。
img v-img-lazypicture alt /这样一个自定义全局指令实现图片懒加载就做好了。
