el-dialog 内有图片列表,打开直接显示图片,内容预加载

el-dialog内有图片列表,需要打开时直接显示图片,不需要显式的加载过程

问题表现

很明显,打开弹框之后有一个图片资源的请求,并且弹框的勋章图片也是逐步的显示出来的,虽然已经很快。但是不够完整,令人感觉这不是一个勋章,像是纸糊,缺少完整的感觉。最好的效果就是:没有加载的过程,打开直接是完整的展示。
el-dialog 内有图片列表,打开直接显示图片,内容预加载

原因

当前看见的是打开才会去请求资源,资源是在img 标签src属性赋值之后去发起的。也就是说需要以下条件:

  1. img标签在dom树上
  2. 提前去让img 标签 src 属性有数据

打开el-dialog 源码:

el-dialog 内有图片列表,打开直接显示图片,内容预加载

也就是说 visible 属性为true之前,直接让 rendered 为true 就会在dom树上渲染

直接通过弹框实例来操作 rendered:

mounted() {
    this.$refs.dialogRef.rendered = true
}

尝试一下确实是可以,但是图片资源加载慢导致,还是能看见图片加载的过程。如果能等待图片加载完成之后再打开弹框就好了

一种解法

图片资源的加载完成有可以通过 load 事件来得知是否加载完成
以下是示例代码:

<template>
  <img :src="imageUrl" @load="onImageLoad">
</template>

<script>
export default {
  data() {
    return {
      isImageLoaded: false,
      imageUrl: 'http://example.com/image.jpg'
    }
  },
  methods: {
    onImageLoad() {
      this.isImageLoaded = true
    }
  }
}
</script>

我是一个图片列表,那么只需要等待每一个图片资源加载完之后触发 load 函数次数大于等于 列表长度 就表明 图片资源加载完毕,可以显示弹框。如下

el-dialog 内有图片列表,打开直接显示图片,内容预加载

el-dialog 内有图片列表,打开直接显示图片,内容预加载

完事儿,效果嘎嘎好

el-dialog 内有图片列表,打开直接显示图片,内容预加载

参考内容:
juejin.cn/post/698541…

原文链接:https://juejin.cn/post/7349880999260635173 作者:前端杨树林

(0)
上一篇 2024年3月28日 下午4:16
下一篇 2024年3月28日 下午4:27

相关推荐

发表回复

登录后才能评论