圖片預加載的一個方法

/*預加載圖片*/

function preLoadImg(){ var imgs = [],            //所有圖片數組

    imgNum =0,            //圖片個數

    hasLoadNum= 0,          //已經加載的數量

    imgAllUrl;            //圖片的src

   imgAllUrl=document.querySelectorAll('img');            //創建img元素
   for(var i=0;i<imgAllUrl.length;i++){
      var src= imgAllUrl[i].src;
      if(src){
         imgs.push(src);
      }
   }
   imgNum=imgs.length;
   function preLoadImg(imgs,fn) {
      for (var i = 0; i < imgs.length; i++) {
         var img = new Image();
         if(fn)img.onload =img.onerror=img.onabort=fn;  //相當於覆蓋屬性或者函數；
         img.src = imgs[i];                      //添加至預加載
      }
   }
   preLoadImg(imgs,function(){
      hasLoadNum++;
      var pre = Math.round(hasLoadNum/imgNum*100);
      console.log(pre+'%');
      if(pre >= 100){
         console.log(imgs);
         //當所有圖片加載完時所要執行的操作
         document.querySelector('#loading').style.display='none';
      }
      //在加載頁加載時想要呈現的內容
      document.querySelector('.load_num').innerHTML=pre+"%";
   });
}
/*預加載圖片*/