design的前端开发博客

var preloadFiles={
    //debug模式
    debug:false,
 
  //图片对象
  imgLoader:null,
  //进度条
  processBar:null,
 
  //初始化变量
  initVars:function(){
      //加载失败次数
      this.errorCount=0;
      //待加载文件列表
      this.filesList=[];
      //待加载的文件总数
      this.filesNumber=0;
      //当前正在加载的文件索引
      this.currentFileIndex=0;
      //已经成功加载的文件
      this.filesDownloadSuccess=[];
      //预先加载结束
      this.preloadFinished=false;
  },
 
  //进度条
  showProcessBar:function(){
      if(this.processBar===null){
        var barContainer=document.createElement('div');
      barContainer.style.cssText='position:absolute; left:2px; top:2px; width:200px; height:6px; border:#9d9d9d 1px solid; padding:1px;';
        this.processBar=document.createElement('div');
      this.processBar.style.cssText='width:0%; height:6px; background-color:#33df33; font-size:6px;';
 
      barContainer.appendChild(this.processBar);
      document.body.appendChild(barContainer);
    }else{
        this.processBar.style.width=Math.ceil(((this.currentFileIndex-1)/this.filesNumber)*100).toString()+'%';
    }
  },
 
  //加载成功
  loadSuccess:function(){
      if(preloadFiles.debug){console.log('√ file "'+preloadFiles.filesList[preloadFiles.currentFileIndex-1]+'" load success!');}
    preloadFiles.filesDownloadSuccess.push(preloadFiles.filesList[preloadFiles.currentFileIndex-1]);
    preloadFiles.downloadElement(preloadFiles.filesList[preloadFiles.currentFileIndex++]);
  },
 
  //加载失败
  loadError:function(){
      preloadFiles.errorCount++;
    if(preloadFiles.debug){console.error('× file "'+preloadFiles.filesList[preloadFiles.currentFileIndex-1]+'" load error!');}
    preloadFiles.downloadElement(preloadFiles.filesList[preloadFiles.currentFileIndex++]);
  },
 
  //添加任务队列
  addFileTasks:function(filesArray){
      //把新的文件列表添加到任务队列
      this.filesList=this.filesList.concat(filesArray);
    this.filesNumber=this.filesList.length;
    this.downloadElement(this.filesList[this.currentFileIndex++]);
 
    if(this.debug){
        console.log('>>add '+filesArray.length+' files to task!');
        console.log(this.filesList);
    }
  },
 
  //load CSS
  loadCss:function(url){
    var cssLoader=document.createElement('link');
    cssLoader.setAttribute('href',url);
    cssLoader.setAttribute('type','text/css');
    cssLoader.setAttribute('rel','stylesheet');
    document.head.appendChild(cssLoader);
  },
 
  //load Script
  loadScript:function(url){
      var scriptLoader=document.createElement('script');
      scriptLoader.setAttribute('src',url);
      scriptLoader.setAttribute('type','text/javascript');
    scriptLoader.onload=this.loadSuccess;
    scriptLoader.onerror=this.loadError;
      document.body.appendChild(scriptLoader);
  },
 
  //load Image
  loadImage:function(url){
      if(this.imgLoader===null){
        this.imgLoader=document.createElement('img');
      this.imgLoader.setAttribute('src',url);
      this.imgLoader.setAttribute('width','0');
      this.imgLoader.setAttribute('height','0');
      document.body.appendChild(this.imgLoader);
      this.imgLoader.onload=this.loadSuccess;
      this.imgLoader.onerror=this.loadError;
    }else{
        this.imgLoader.setAttribute('src',url);
    }
  },
 
  //创建dom元素
  downloadElement:function(url){
      this.showProcessBar();
 
      if(this.currentFileIndex>this.filesNumber){
        setTimeout(function(){preloadFiles.processBar.parentNode.style.cssText='display:none;';},2000);
      this.preloadFinished=true;
      return false;
    }
 
    //匹配eg: xxx.css?version=n
      if(/\.(jpg|png|gif|bmp|jpeg|js|css)(\\?.+)?$/.test(url)){
        if(this.debug){
          //console.info('subfix=.'+RegExp.$1);
        console.log(' ');
          console.info('>>current is loading '+url+', ['+(this.currentFileIndex)+'/'+this.filesNumber+']');
      }
      switch(RegExp.$1){
          case 'css':
            this.loadCss(url);
          this.downloadElement(this.filesList[this.currentFileIndex++]);
        break;
        case 'js':
            this.loadScript(url);
        break;
        default:
            this.loadImage(url);
        break;
      }
    }else{
        if(this.debug){
          console.log(' ');
          console.warn(url+' is not a valid file, ['+(this.currentFileIndex)+'/'+this.filesNumber+']');
      }
      this.downloadElement(this.filesList[this.currentFileIndex++]);
    }
  },
 
    //初始化
  initUrlArray:function(filesArray,urlPrefix){
      for(var i=0,len=filesArray.length;i<len;i++){
        if(!/^http:|https:/.test(filesArray[i])){
          filesArray[i]=urlPrefix+filesArray[i];
      }
    }
    return filesArray;
  },
 
  //加载文件
    load:function(filesArray,urlPrefix,debug){
      if(filesArray&&filesArray.length&&filesArray.length>0){
        if(filesArray.constructor!==Array){alert("参数错误，第一个参数需要为数组"); return false;}
    }else{
        return;
    }
    if(urlPrefix){
        if(urlPrefix===true){debug=urlPrefix; urlPrefix='';}
      if(urlPrefix.constructor!==String){alert("参数错误，第二个参数需要为字符串"); return false;}
    }
 
      this.debug=debug||false;
    //如果加载还未开始，或者已经加载结束，则重新初始化变量
    if(!this.filesNumber||this.preloadFinished){this.initVars();}
 
      if(urlPrefix){
        filesArray=this.initUrlArray(filesArray,urlPrefix);
    }
 
    //添加任务队列
    this.addFileTasks(filesArray);
  }
}