图片预加载

第一种方法，异步回调，执行完这个函数，在回调<!DOCTYPE html<html lang="en"><head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //创建数组 用于保存图片的对象
        var arr=[];
        var num=1;
        //创建图片对象
        var img=new Image();
        //把第一张图片加载到缓存中
        img.src="./image/icon/"+num+".gif";
　　　　 //添加这个图片
　　　　　arr.push(img);
        //给对象img 添加加载事件
        img.addEventListener("load",loadHandler);


        //图片加载事件
        function loadHandler(){//移除load事件，要吗都会在缓存中挂载
            img.removeEventListener("load",loadHandler);
            //重新实例化img对象
            img=new Image();

            num++;
            if(num>6){
                return;
            }
            //给img再次添加load事件，并调用自身   递归函数  也是回调函数
            img.addEventListener("load",loadHandler);
            //在把下一张图片添加进来 就可以了
            img.src="./image/icon/"+num+".gif";
          
            
            
        }
    </script>
</body>
</html>

第二种方式，在第一种的基础上给img对象添加属性方便后期调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <script>
        //首先把图片存入数组中
        var arr=[];
        for(i=1;i<=6;i++){
            arr.push("./image/icon/"+i+".gif");
        }
        

        //执行这个函数，参数1  为当前存入图片的数组，参数2为回调函数，执行完getImage函数后调用callbackFun
        getImage(arr,callbackFun);

        function getImage(arr,callback){
            //创建图片对象
            var img=new Image();
            //给图片对象添加 arr num imagelist callback的属性，方便后面使用
            img.arr=arr;
            img.num=0;
            img.imageList=[];
            img.callback=callback;
            //给图片添加事件
            img.addEventListener("load",loadHandler);
            //加载当前第1张图片  num=0 就是数组中的1
            img.src=arr[img.num];
        }

        //图片加载事件
        function loadHandler(){
            //把img下面的imagelist属性 push的对象
            this.imageList.push(this);
            //num增加
            this.num++;
            if(this.num>5){
                //这里的callback回调函数，就是我们传递进去需要显示imagelist用的
                this.callback(this.imageList);
                return
            }
            //加载下一张图片
            this.src=this.arr[this.num];
        }

        function callbackFun(arr){
            console.log(arr);
        }
    </script>
</body>
</html>

　　图片预加载封装，其实就是把上面的代码单独写在一个js文件中，通过引用的方式来调用注意代码中的this

新建一个Yimage.js文件

function getImage(arr,callback){
    //创建图片对象
    var img=new Image();
    //给图片对象添加 arr num imagelist callback的属性，方便后面使用
    img.arr=arr;
    img.num=0;
    img.imageList=[];
    img.callback=callback;
    //给图片添加事件
    img.addEventListener("load",this.loadHandler);
    //加载当前第1张图片  num=0 就是数组中的1
    img.src=arr[img.num];
}

//图片加载事件
function loadHandler(){
    //把img下面的imagelist属性 push的对象
    this.imageList.push(this);
    //num增加
    this.num++;
    if(this.num>5){
        //这里的callback回调函数，就是我们传递进去需要显示imagelist用的
        this.callback(this.imageList);
        return
    }
    //加载下一张图片
    this.src=this.arr[this.num];
}

index主文件中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/Yimage.js" ></script>
</head>
<body>
    

    <script>
        var arr=[];
        for(i=1;i<=6;i++){
            arr.push("./image/icon/"+i+".gif");
        }
        
        
        getImage(arr,callbackfun);
        function callbackfun(arr){
            console.log(arr.src);
        }
    </script>
</body>
</html>

posted @ 2020-09-09 14:22 WhiteSpace 阅读(368) 评论(0) 收藏举报

刷新页面返回顶部

WhiteSpace

图片预加载

公告