自定义指令图片懒加载

F2E_YoverL

已于 2024-05-15 22:19:06 修改

阅读量233

点赞数 1

分类专栏： vue 文章标签： vue.js

于 2024-05-15 22:17:50 首次发布

本文链接：https://blog.csdn.net/long_yy_/article/details/138925536

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

main.js文件中注册自定义指令

Vue.directive('imglazy',{
  inserted:function(el){
    // img标签src设置空
    el.src = ''
    // dataset：所有的自定义属性合集
    let imgurl = el.dataset.url
    // 创建监听者
    let obs = new IntersectionObserver(([{isIntersecting}])=>{
      console.log(isIntersecting);
      // isIntersecting：表示当前图片出现在屏幕中
      // 判断当前图片是否在屏幕中，是则设置src
      if(isIntersecting){
        // 设置img中src路径  加载请求图片
        el.src = imgurl
        // 当图片加载出来后，取消监听  防止所有图片都加载完重复监听
        obs.unobserve(el)
      }
    })
    // 监听img标签 [0].isIntersecting
    obs.observe(el)
    console.log('el',el.dataset);
  }
})

在img中使用自定义指令

<div v-for="(item,index) in imgs" :key="index">
   <!-- data-url自定义图片地址属性 data是固定的  url才是自己取的属性名 -->
   <img src="" :data-url="item" v-imglazy>
</div>

图片地址

data(){
    return{
      imgs:[
        'http://a.zhengjie.online/83a73d4c8361fd8a2058ddb7a7577bf7.jpeg',
        'http://a.zhengjie.online/7cfaeddc570e577642fef7afebe41ecd.jpeg',
        'http://a.zhengjie.online/3c1667520f005f8a2fb08a565f1aba0e.jpeg',
      ]
    }
}