业务场景

用户创建自己的页面，给创建好的内容页面增加皮肤效果。选择某一皮肤后，当该皮肤中的所有图片都加载完后，再展示皮肤效果；加载图片的时候展示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;
		})
    }
  }
}