自己封装的一个LoadRes组件

这两周一直太忙，没有好好处理上上上周遇到的一个让我加班到凌晨的问题，这个问题是判断flash的加载。

之前的思路是让flash的人在制作flash的时候，加入了一个回调方法，该方法再会回调我页面的方法。

想象虽然很丰满，但是现实确很骨感，由于页面资源的加载顺序问题，如果flash是通过缓存读取得到的，那么flash便会先于我的脚本加载，这时便会出现flash调不到我定义的方法。但是由于功能的原因以及考虑页面的整洁性，我又不能将脚本放入到head中，最终的解决思路就是在head中加入一个script标签单独定义回调函数，然后再定义一个全局变量，用于判断flash是否已经回调我页面的方法。

所以我就想能不能自己去判断flash的加载问题，然后百度了以下，发现除了percentLoaded方法之外并没有什么好的办法，而且之前还以为percentLoaded是有兼容性问题的，但通过仔细的查找资料，我个人认为该方法存在的兼容性原因不在于浏览器，而在于用户电脑安装的flash player 插件的问题，另外不同浏览器对于object与embed标签支持的不同，更将这个差异性拉的更大，所以为了解决这个问题，我就用定时器不断的轮询检测，而且对于根本不支持percentLoaded的浏览器，我默认给了6秒的等待时间，超出6秒则不在检测flash的加载。

在写判断Flash加载的功能同时，我也顺便把图片、音频、视频加载的功能也添加进来，自己封装了一个loadRes的小组件。

loadRes 即 load Resources 的简写，用于判断资源的加载。

===============================================

最终通过我对自己电脑的测试，并没有发现明显的bug，测试的浏览器有：

　　IE6 : 可能存在隐患。

　　IE7 - IE8 ： 正常

　　IE9 - IE10 ：可能会并行触发onreadystatechange 与 onload的(我个人感觉这个不是啥问题)

　　IE11 - edge : 正常

　　Chrome : 正常

　　Opera 12 (最后一版基于persto内核) ：正常

　　Safari 5.1.7(win版) ：正常

　　Firefox : 正常

PS ： 但是我的“第七感”，还是可以感觉到这个组件肯定是有问题的，但是受限于自身的实力也只能做到这样了，所以这里主要是抛砖引玉之用，希望各路大神能多多提点意见，或者优化之类的。感激不尽！！

=========================================

下面是具体的代码：

 /*
      * +++++++++++++++++++++++++++++++++++++++++++++
      *  loadRes (load Resources) Component
      *  version 1.0
      *  author gtshen
      *  date 2016/8/27
      *  bug feedback 903050269 (QQ)
      * +++++++++++++++++++++++++++++++++++++++++++++
      */

 (function(root){
     'use strict';
     function loadRes(params){

         this.fn = params.fn || null;
         this.filter = params.filter || 'img';  // Filter
         this.oImgs = document.images;
         this.imgs = [];
         this.count = 0;
         this.curr = 0;
         this.read();

     }

     loadRes.prototype.read=function(){

         var _this = this;

         if(/audio/.test(this.filter) && 'Audio' in window){
             this.audio = document.getElementsByTagName('audio');
             this.count+=this.audio.length;

         }

         if(/video/.test(this.filter) && 'Video' in window){
             this.video = document.getElementsByTagName('video');
             this.count+=this.video.length;

         }

         if(/flash/.test(this.filter)){
             var embed = document.getElementsByTagName('embed'),
                 object = document.getElementsByTagName('object'),
                 flen = (embed.length >= object.length)? embed.length : object.length;

             this.count+=flen;
         }

         var loadImgs = function(){

             var imgReg = /url\(\"?(.*[\.jpg|\.png|\.bmp|\.jpeg])\"?\)/,
                 allElement = document.getElementsByTagName('*');

             for(var i =0,l=allElement.length;i<l;i++){
                 _this.oImgs[i] && _this.imgs.push(_this.oImgs[i].src);

                 var style  = (window.getComputedStyle)?getComputedStyle(allElement[i],null)['backgroundImage'] : allElement[i].currentStyle['backgroundImage'];

                 if(imgReg.test(style)){
                     _this.imgs.push(RegExp.$1);
                 }
             }
             _this.count+=_this.imgs.length;

             for(var i = 0,l=_this.imgs.length;i<l;i++){
                 var img = new Image();
                 img.src = _this.imgs[i];
                 if(img.complete){
                     _this.fn && _this.fn(_this.count,++_this.curr);
                 }else{
                     img.onload = function(){
                         if(!this.isloaded){
                             this.isloaded = true;
                             _this.fn && _this.fn(_this.count,++_this.curr);
                         }
                     };
                     img.onreadystatechange=function(){
                         if(_this.readyState == 'loaded' || _this.readyState == 'complete' && !this.isloaded){
                             this.isloaded = true;
                             _this.fn && _this.fn(_this.count,++_this.curr);
                         }
                     };
                     img.onerror=img.onabort=function(){
                         _this.onerror=_this.onabort=null;
                         _this.fn && _this.fn(_this.count,++_this.curr);
                     };
                 }
             }

         }();

         if(/audio/.test(this.filter) && 'Audio' in window){

             var loadMusic=function(){    // Audio load handler
                 for(var i=0,l=_this.audio.length;i<l;i++){
                     _this.audio[i].onloadedmetadata=function(){
                         _this.fn && _this.fn(_this.count,++_this.curr);
                     };
                     _this.audio[i].onerror=function(){
                         _this.fn && _this.fn(_this.count,++_this.curr);
                     };
                 }
             }();

         }

         if(/video/.test(this.filter) && 'Video' in window){

             var loadVideo=function(){    // Video load handler

                 for(var i=0,l=_this.video.length;i<l;i++){
                     _this.video[i].onloadedmetadata=function(){
                         _this.fn && _this.fn(_this.count,++_this.curr);
                     };
                     _this.video[i].onerror=function(){
                         _this.fn && _this.fn(_this.count,++_this.curr);
                     };
                 }

             }();
         }

         if(/flash/.test(this.filter)){    

             var loadFlash = function(){        // Flash Laded  Handler

                     var    loaded = 0,
                         num = 0,
                         timer = null,
                          core = function(){
                             num++;
                             for(var i=0,l=flen;i<l;i++){
                                 if(loaded < flen){
                                     try{
                                         try{
                                             if(embed[i].PercentLoaded()){       

                                                 if(Math.floor(embed[i].PercentLoaded()) == 100  && !embed[i].flag){
                                                     loaded++;
                                                     embed[i].flag = true;
                                                     _this.fn && _this.fn(_this.count,++_this.curr);
                                                 }
                                                 num = 0;

                                             }
                                         }catch(a){

                                             if(embed[i].PercentLoaded){
                                                 if(Math.floor(embed[i].PercentLoaded())== 100  && !embed[i].flag){
                                                     loaded++;
                                                     embed[i].flag = true;
                                                     _this.fn && _this.fn(_this.count,++_this.curr);
                                                 }
                                                 num = 0;
                                             }
                                         }
                                     }catch(b){}
                                     try{
                                         try{
                                             if(object[i].PercentLoaded()){
                                                 if(Math.floor(object[i].PercentLoaded())== 100  && !object[i].flag){
                                                     loaded++;
                                                     object[i].flag = true;
                                                     _this.fn && _this.fn(_this.count,++_this.curr);
                                                 }
                                                 num = 0;
                                             }
                                         }catch(c){
                                             if(object[i].PercentLoaded){
                                                 if(Math.floor(object[i].PercentLoaded) == 100  && !object[i].flag){
                                                     loaded++;
                                                     object[i].flag = true;
                                                     _this.fn && _this.fn(_this.count,++_this.curr);
                                                 }
                                                 num = 0;
                                             }
                                         }
                                     }catch(d){}
                                 }
                             }

                             if(loaded >= flen){
                                 return false;
                             }
                             if(num >= flen){
                                 _this.fn && _this.fn(_this.count,_this.curr+=num);
                                 return false;
                             }

                             timer = setTimeout(core,1000);
                     };
                     core();
             }();

         }
     };
     root.loadRes = function(params){
         new loadRes(params);
     };
 })(window);

======= 调用方式 =======

 loadRes({
     'filter':'img,flash,audio,video',    //用于指定加载何种类型的资源,每种资源用逗号分隔。
     'fn':function(total,cur){    // 资源加载的回调函数。total:要加载的资源总数，cur当前已完成加载的资源数量。
         /*
           if(cur >= total) {
             Here is Your Code Area
          }
          */
     }
 });