非常实用的N张图片预加载函数封装

作为前端开发人员，在日常开发中我们总会与图片打交道，如果是直接使用图片的话那是非常简单的，比如做背景图之类。然而当图片很多时，比如做一些游戏或者是瀑布流的效果时，如果直接使用会导致图片还没加载完成就开始运行程序，这样会使程序运行紊乱，为了解决这个问题我们需要对图片进行预加载。

一种简单的办法就是把图片的src值放在一个数组中，用for循环对数组进行遍历，创建图片对象并将遍历的src值加到图片对象的src属性上，之后在写一个onload的回调函数就可以使用图片对象了。demo代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            body,html{
                height: 100%;
            }
            #wrap{
                width: 100%;
                height: 100%;
                background-color: red;
                position: relative;
            }
            #wrap p{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                font-size: 100px;
                
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <p>0%</p>
        </div>
        <div id="imgs"></div>
    </body>
    <script type="text/javascript">
        var arr = 
        
        //获取p标签
        var p = document.querySelector("#wrap p");
        //获取进度条div
        var wrap = document.querySelector("#wrap");
        //获取imgs的div
        var imgsDiv = document.querySelector("#imgs");
        //存放img对象的数组
        var imgsArr = [];
        for(var i = 0; i< arr.length; i++){
            //创建img对象
            var img = new Image();
            //给图片设置src属性
            img.src = arr[i];
            //存放img对象
            imgsArr.push(img);
            //图片预加载(当图片记载完毕之后，走的回调调函数)
            var count = 0;
            img.onload = function(){
                count++;
                //加载图片百分比
                var rate = count / imgsArr.length * 100 + "%";
                //给p标签设置内容（进度）
                p
                .innerHTML = rate;
                
                //当所有图片加载完成之后，拼接到imgs这个div中 
                if(count >= imgsArr.length){
                    //当所有图片都加载完成，隐藏进度条div
                    wrap.style.display = "none";
                    for(var j = 0; j < imgsArr.length; j++){
                        //插入img
                        imgsDiv.appendChild(imgsArr[j]);
                    }
                }
            }
            
            
        }
        
        
    </script>
</html>

很明显如果图片很多的话，光是写数组就会很伤脑筋，而且上面的方法功能性不强，下面介绍一种更好的方法，对此我封装了一个函数。

function loadingImg(obj){
   var loadEndImg = {};//定义  加载完成后的图片对象
   var len = 0; //定义图片的总张数
   var prog = 0;//定义加载的进度
   for (var i in obj.loadImg){
    len++; //自动计算总张数
   }
   for (var i in obj.loadImg){
   //创建图片对象
    var imgObj = new Image();
    imgObj.src = obj.loadImg[i];
    imgObj.key = i;
    imgObj.onload = function (){
     loadEndImg[this.key] = this;
     prog++;
     if (obj.prog){
      obj.prog(parseInt(prog/len*100));
     }
     if 
      
     }
    }
   }
  }

使用方法：我们可以自己写一个对象传入上面的函数。

loadingImg({
   loadImg: {
    img1:"img/cross_bg.png",
    img2:"img/game_bg.png",
    img3:"img/goddess0.png",
    img4:"img/goddess1.png",
    img5:"img/goddess2.png"
   },
    prog: function(num){
      $("#prog").html(num+"%");
//      console.log(num);
    if(num==100){
   //此时加载进度为100%
    };
    },
   complete:init //加载完成的回调函数
  })

全部频道

非常实用的N张图片预加载函数封装