背景 {#背景}

界面很长，屏幕不能一下装下所有内容，如果以进入首页就把所有内容都加载完的话所需时间较长，会影响用户体验，所以可以当用户浏览到时再去加载。

代码 {#代码}

新建index.js文件 {#新建indexjs文件}

src下新建directives文件夹，并新建index.js文件

import { useIntersectionObserver } from '@vueuse/core'
import { install } from 'element-plus'

export const lazyPlugin = {
install(app){
// 懒加载指令逻辑


        <span class="hljs-comment">// 定义全局指令</span>
        <span class="hljs-comment">// 这个属于图片懒加载部分</span>
        app.<span class="hljs-title function_">directive</span>(<span class="hljs-string">'img-lazy'</span>,{
            <span class="hljs-title function_">mounted</span>(<span class="hljs-params">el, binding</span>){
                <span class="hljs-comment">// el: 指令绑定的那个元素 img</span>
                <span class="hljs-comment">// binding: binding.value 指令等于号后面绑定的表达式的值 图片url</span>
                <span class="hljs-keyword">const</span> {stop} =<span class="hljs-title function_">useIntersectionObserver</span>(
                    el,
                    <span class="hljs-function">(<span class="hljs-params">[{isIntersecting}]</span>) =&gt;</span> {
                        <span class="hljs-comment">// 第一次赋值之后，就不用再监听了 -&gt; stop()</span>
                        <span class="hljs-comment">// 防止内存的浪费</span>
                        <span class="hljs-keyword">if</span>(isIntersecting){
                            el.<span class="hljs-property">src</span> = binding.<span class="hljs-property">value</span>
                            <span class="hljs-title function_">stop</span>()
                        }
                    },
                )
            }
        })
    }



`}
`

修改main.js文件 {#修改mainjs文件}

// 引入图片延迟加载
import {lazyPlugin} from '@/directives'
// 使用图片延迟加载插件`
app.`use`(lazyPlugin)
`

使用 {#使用}

index.js文件中定义的名字叫img-lazy，在这里使用img的时候用 v-img-lazy，后面跟图片对应路径即可。

比如：

 <img :alt="item.content" v-img-lazy="baseUrl + item.imgUrl"/>