Vue 判断页面内图片是否渲染完成

<!-- 1.首先获取到接口数据并赋值在页面上,并给 img 添加 *ref* --><div class="box" v-for="(item,index) in dataList" :key="index"><img ref="imgRef" :src="item.url" ></div>

var vm = new Vue({el: '#app',data: {dataList:[], //存放接口数据num:0 //存放加载成功的数量},methods:{getDataList() {getList(this.listQuery).then(res => {if (res.data && res.data.code === 200) {this.dataList = res.data.data.list;} else {this.$message.error(res.data.msg);}}).catch(res => {this.$message.error(res.data.msg);});},// 通过 complete 判断 img 是否渲染成功imgLoad(img, callback) {var _this = this;var timer = setInterval(function() {if (plete) {//渲染成功则 num +1_this.num++;callback(img);clearInterval(timer);}}, 50);}},watch:{/*2.通过 watch 监听 dataList(存放接口数据的变量) 的数据变化*/ dataList(val){this.$nextTick(function() {/* 3.通过ref获取到图片的DOM元素 */let list = this.$refs.imgRef;//对获取到的图片元素进行遍历for (let i in list) {/* 4.调用 imgLoad 方法对每一个图片进行判断 */this.imgLoad(list[i], () => {// 当变量 num 等于接口获取的数据的长度时，则代表图片都加载完成if (this.num == list.length - 1) {// 进行业务操作console.log("加载成功");}});}})}},})

注意：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组 ，此时想要拿到单个的ref 只需要循环就可以了。