element 多个v-loading渲染图片,开启和关闭弹层

最新推荐文章于 2024-03-14 19:02:34 发布

桑西巴儿

最新推荐文章于 2024-03-14 19:02:34 发布

阅读量296

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/Wings96/article/details/134250412

版权

文章描述了如何在业务场景中，针对页面加载大量图片导致速度慢的问题，利用Vue组件`element-ui`的`v-loading`功能结合DOM操作，实现在图片循环加载时控制加载提示的显示和隐藏，提升用户体验。

摘要由CSDN通过智能技术生成

业务场景:页面加载比较大的图片或者比较多的情况下,速度很慢用户体验不好,因此结合图片加载事件@load和element ui v-loading,由于在官方文档没有找到指令式v-loading怎么绑定多个布尔值,因为图片是循环的,然后就想到了通过dom去关闭弹层,然后再切换页码的时候重新加载弹层,以此反复

结构部分:

 <ul class="fx fx-wrap">
        <li   class="img-cont"  v-for="(item, index) in list" :key="index" @click="getDetail(item.id)" v-loading="imgLoading"
          element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)">
          <img id="imgDom" @load="loadImg(index)" :src="item.imgUrl" alt="" />
        </li>
      </ul>

js:

data中定义

 imgLoading: true

处理函数:

   // 加载
    loadImg(index) {
      //隐藏元素去掉加载中
      let imgCont = document.getElementsByClassName('img-cont')
      imgCont[index].children[1].style.display='none'
    },

   // 分页触发事件
    CurrentChange(current) {
      let imgCont = document.getElementsByClassName('img-cont')
      // 分页时重新渲染loading
      for (let index = 0; index < imgCont.length; index++) {
       imgCont[index].children[1].style.display='block'
        
      }
      this.pageNum = current;
      this.getList();
    },