vue3前端开发-小兔鲜项目-图片懒加载的自定义标签！很多大型网站，因为首页面渲染的内容太多了，然而有些用户，可能在顶部就发现了自己感兴趣的内容，直接就点击跳转去了其他页面，因此，完全没有必要完全加载所有的页面内容，使用懒加载，可以俭省节约一些服务器的资源调用。降低服务器的压力。这种业务场景，在大型网站的客户体验度优化中是非常常见和必须的。
下面直接看代码的操作流程和内容。
第一步，我们新建一个index.js。存档放在目录
如图，在directives目录下面新建一个index.js
在这里面我们自定义一个懒加载的插件。然后在主配置文件main.js中调用注册一下就行了。
//定义懒加载插件
import { useIntersectionObserver } from "@vueuse/core";
export const lazyPlugin = {
install(app){
//懒加载指令逻辑
app.directive('img-lazy',{
mounted(el,binding){
//el:指令绑定的那个元素 img
//binding: binding.value 指令等于号后面绑定的
console.log(el,binding.value)
useIntersectionObserver(
el,
([{isIntersecting}]) =>{
console.log(isIntersecting)
if(isIntersecting){
//进入视口区域
el.src = binding.value
}
},
)
}
})
}
}
解释一下，意思就是，这个指令将来会绑定到img标签里面，作为一个动态渲染图片内容的作用。
当浏览器的页面视图进入浏览区域内，就会加载绑定我们的接口调用绑定过来的资源信息，给img标签做图片渲染操作。
就是这个意思。
在main.js中做一个调用，和注册即可，非常简单。
下面是测试的效果情况。
如图，我们为了便于观察页面请求的资源，打开浏览器自带的开发者模块。
打开图片监控按钮。
此时，页面缓慢的向下拖动滚动条，当人气推荐栏目露头的时候，就会马上渲染加载图片。
如图，加载了这四张图片。