业务场景

用户创建自己的页面，给创建好的内容页面增加皮肤效果。选择某一皮肤后，当该皮肤中的所有图片都加载完后，再展示皮肤效果；加载图片的时候展示loading效果。

部分页面展示如下：

工具代码

在utils.js文件中写如下代码，当图片加载完成后执行callback函数：

export function loadImageEnd(list, callback, basePath) {if (!list || list.length === 0) return;if (basePath) list = list.map(item => basePath + item);let img = new Image();img.data = {list: list,callback: callback,resultList: [],num: 0}img.addEventListener("load", loadImgHandler);img.addEventListener("error", loadImgHandler);img.src = list[img.data.num];}function loadImgHandler(e) {let data = e.currentTarget.data;if (e.type !== 'error') {data.resultList.push(e.currentTarget.cloneNode(false));}data.num++;if (data.num > data.list.length - 1) {e.currentTarget.removeEventListener("load", loadImgHandler);if (data.callback) {data.callback(data.resultList);}data = null;return;}e.currentTarget.src = data.list[data.num];}

使用

第一个参数为所有图片路径的数组。第二个参数为所有图片加载完成后的回调函数。第三个参数为所有图片的前置路径，如果已经是完整路径，则不需要传此参数。

import {loadImgEnd ) from '@/utils'export default {data(){return {isLoading:true}},methods:{//选择皮肤的事件clickHandle(id){let imgArr = [];//当前皮肤中所有的图片路径loadImgEnd(imgArr,()=>{this.isLoading = false;})}}}