JS-案例-全js轮播图

图片预加载封装

//Utils.js
 
//封装 预加载图片
var Utils=(function () {
    return {
        //SSS
        loadImg:function (srcList,callBack) {//图片地址  回调函数
            var img=new Image();
            img.num=0;//初始化num为0 图片数
            img.imgList=[];//存放图片
            img.srcList=srcList;
            img.callBack=callBack;//回调函数
            img.addEventListener("load",this.loadHandler);//加载load
            img.src="./img/"+srcList[img.num];//拼接图片地址
        },
        loadHandler:function (e) {
        	//this 指代img
        	/*cloneNode该方法将复制并返回调用它的节点的副本。
        	 * 如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
        	否则（也就是默认值，或者false），它只复制当前节点。*/
            this.imgList.push(this.cloneNode(false));//将img图片尾插入imgList数组
            this.num++;
            if(this.num>=this.srcList.length){//图片数>=srcList数组(保存图片地址)的长度
                this.callBack(this.imgList);//将数组传入回调函数
                return;
            }
            //事件侦听没有被删除,只需更改src,监听加载load后触发该事件,进入该函数this.loadHandler
            this.src="./img/"+this.srcList[this.num];
        }
    }
})();

main代码部分