Vue3图片懒加载

实现图片进入视图窗口加载图片

1.利用vueuse插件

1.1安装vueuse插件

npm i @vueuse/core

1.2引入useIntersectionObserver  //响应式监听目标元素的可见性。

具体详见useIntersectionObserver | VueUse中文文档

1.3创建组件方法

// 定义懒加载插件
import {useIntersectionObserver} from '@vueuse/core'
export const lazyPlugin = {
    install (app) {
        // 懒加载指令逻辑
        app.directive('img-lazy', {
            mounted (el, binding) {
                // el: 指令绑定的那个元素
                // binding: binding.value 指令等于号后面绑定的表达式的值
              
         const {stop} =  useIntersectionObserver(
                    el, ([{ isIntersecting }]) => {
                        console.log(el, binding.value);
                      if( isIntersecting) {  
                        el.src = binding.value
                        stop()
                      }
                    }
                )
            }
        })
    }
}

1.4 在main.js引入组件方法

// 引入懒加载指令插件并注册
import {lazyPlugin} from '@/directives'
app.use(lazyPlugin)

1.4 在需要懒加载图片的img元素上引用

<li v-for="item in contentList" :key="item.id">
<RouterLink to="/">
<img v-img-lazy="item.picture"  alt="" />
<p class="name">{{ item.name }}</p>
<p class="price">&yen;{{ item.price }}</p>
 </RouterLink>
</li>