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

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

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

    
        
        
        
    
    
        

            
0%
        
        

    
    

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

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 (prog>=len&&obj.complete){
      obj.complete(loadEndImg);
     }
    }
   }
  }

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

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 //加载完成的回调函数
  })