el-dialog内有图片列表,需要打开时直接显示图片,不需要显式的加载过程
问题表现
很明显,打开弹框之后有一个图片资源的请求,并且弹框的勋章图片也是逐步的显示出来的,虽然已经很快。但是不够完整,令人感觉这不是一个勋章,像是纸糊,缺少完整的感觉。最好的效果就是:没有加载的过程,打开直接是完整的展示。
原因
当前看见的是打开才会去请求资源,资源是在img
标签src
属性赋值之后去发起的。也就是说需要以下条件:
- img标签在dom树上
- 提前去让
img
标签src
属性有数据
打开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 函数次数大于等于 列表长度 就表明 图片资源加载完毕,可以显示弹框。如下
完事儿,效果嘎嘎好
原文链接:https://juejin.cn/post/7349880999260635173 作者:前端杨树林