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

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

问题表现

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

原因

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

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

打开el-dialog 源码：

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

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

javascript 复制代码

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

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

一种解法

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

vue 复制代码

<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 函数次数大于等于列表长度就表明图片资源加载完毕，可以显示弹框。如下

完事儿，效果嘎嘎好

参考内容： juejin.cn/post/698541...