js封装图片预加载

最新推荐文章于 2024-08-27 22:36:25 发布

胡萝卜大王驾到通通闪开

最新推荐文章于 2024-08-27 22:36:25 发布

阅读量329

点赞数

分类专栏：曾经学习的时候写的一些很烂的笔记文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44157964/article/details/104200419

版权

曾经学习的时候写的一些很烂的笔记同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

小案例

10 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

utils.js

var Utils = (function () {
    return {
        loadImage:function(arr,callback,basePath){
            if(typeof basePath==="string"){//如果传图片路径
                arr=arr.map(function(item){
                    return basePath+item;//把每一项的图片路径拼接到起来,放到数组中
                })
            }
            var img=new Image();//创建一个图片对象

            //预加载事件,src设置会触发预加载事件,这时候还没有设置src,所以不会触发
            img.addEventListener("load",this.loadHandler);
            
            img.addEventListener("error",this.loadHandler);//如果加载错误

            img.resultArr=[];//img是一个对象,可以添加数组
            img.num=0;
            img.arr=arr;
            img.self=this;//指当前对象Utils
            img.callback=callback;
            img.src=arr[0];//设置src,触发预加载事件,调用loadHandler函数,
        },

        //load事件是在图片被加载完成之后才会触发,调用这个函数时第一个图片已经加载完成,
        //然后复制一个图片对象,给这个图片对象设置src属性,等这个图片加载完成之后,然后再调用预加载事件,进行下一个图片对象的创建
        loadHandler:function(e){
            if(e.type!=="error")this.resultArr.push(this.cloneNode(false));//复制img对象放入到数组中,这里的img就是更改了src之后的图片
            this.num++;

            //如果复制的图片对象等于原本数组的图片个数,则返回一个回调函数
            if(this.num>this.arr.length-1){
                this.removeEventListener("load",this.self.loadHandler);//加载完成之后删除事件,之后再修改src不会调用事件
                
                if(this.callback){//如果传入了回调函数
                    this.callback(this.resultArr.slice());//复制一个resultArr返回,原本的resultArr清空,释放内存
                }else{//如果没有传入回调函数,则创建一个自定义事件,拋发出去,
                    var evt=new Event("Load_image_Finish");
                    evt.resultArr=this.resultArr;
                    document.dispatchEvent(evt);
                }
                this.resultArr=null;
                this.self=null;
                this.callback=null;
                this.arr=null;
                return;
            }
            this.src=this.arr[this.num];//把每一个复制的图片设置src属性,调用预加载事件,继续复制下一个图片对象
        }
    }
})();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/Utils.js"></script>
</head>
<body>
    <script>
        var arr=[];
        for(var i=0;i<80;i++){
            arr.push(i+"-.jpg");
        }
        // 函数的参数
        // 必须填写的写在前面,不是必须填写的写在后面
        document.addEventListener("Load_image_Finish",finishImage)//事件抛发的好处:不管有没有加事件侦听都不会报错
        Utils.loadImage(arr,finishImage,"./img/");

       /*  function finishImage(arr){//回调函数必须具有依懒性,如果没有传入finishImage则会报错
            // console.log(arr)
            arr.forEach(function(item){
                document.body.appendChild(item)
            })
        */ 
        }
    </script>
</body>
</html>