这两周一直太忙，没有好好处理上上上周遇到的一个让我加班到凌晨的问题，这个问题是判断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 ： 但是我的“第七感”，还是可以感觉到这个组件肯定是有问题的，但是受限于自身的实力也只能做到这样了，所以这里主要是抛砖引玉之用，希望各路大神能多多提点意见，或者优化之类的。感激不尽！！
=========================================
下面是具体的代码：
1 /* 2 * +++++++++++++++++++++++++++++++++++++++++++++ 3 * loadRes (load Resources) Component 4 * version 1.0 5 * author gtshen 6 * date 2016/8/27 7 * bug feedback 903050269 (QQ) 8 * +++++++++++++++++++++++++++++++++++++++++++++ 9 */ 10 11 (function(root){ 12 'use strict'; 13 function loadRes(params){ 14 15 this.fn = params.fn || null; 16 this.filter = params.filter || 'img'; // Filter 17 this.oImgs = document.images; 18 this.imgs = []; 19 this.count = 0; 20 this.curr = 0; 21 this.read(); 22 23 } 24 25 loadRes.prototype.read=function(){ 26 27 var _this = this; 28 29 if(/audio/.test(this.filter) && 'Audio' in window){ 30 this.audio = document.getElementsByTagName('audio'); 31 this.count+=this.audio.length; 32 33 } 34 35 if(/video/.test(this.filter) && 'Video' in window){ 36 this.video = document.getElementsByTagName('video'); 37 this.count+=this.video.length; 38 39 } 40 41 if(/flash/.test(this.filter)){ 42 var embed = document.getElementsByTagName('embed'), 43 object = document.getElementsByTagName('object'), 44 flen = (embed.length >= object.length)? embed.length : object.length; 45 46 this.count+=flen; 47 } 48 49 var loadImgs = function(){ 50 51 var imgReg = /url("?(.*[.jpg|.png|.bmp|.jpeg])"?)/, 52 allElement = document.getElementsByTagName('*'); 53 54 for(var i =0,l=allElement.length;i<l;i++){ 55 _this.oImgs[i] && _this.imgs.push(_this.oImgs[i].src); 56 57 var style = (window.getComputedStyle)?getComputedStyle(allElement[i],null)['backgroundImage'] : allElement[i].currentStyle['backgroundImage']; 58 59 if(imgReg.test(style)){ 60 _this.imgs.push(RegExp.$1); 61 } 62 } 63 _this.count+=_this.imgs.length; 64 65 for(var i = 0,l=_this.imgs.length;i<l;i++){ 66 var img = new Image(); 67 img.src = _this.imgs[i]; 68 if(img.complete){ 69 _this.fn && _this.fn(_this.count,++_this.curr); 70 }else{ 71 img.onload = function(){ 72 if(!this.isloaded){ 73 this.isloaded = true; 74 _this.fn && _this.fn(_this.count,++_this.curr); 75 } 76 }; 77 img.onreadystatechange=function(){ 78 if(_this.readyState == 'loaded' || _this.readyState == 'complete' && !this.isloaded){ 79 this.isloaded = true; 80 _this.fn && _this.fn(_this.count,++_this.curr); 81 } 82 }; 83 img.onerror=img.onabort=function(){ 84 _this.onerror=_this.onabort=null; 85 _this.fn && _this.fn(_this.count,++_this.curr); 86 }; 87 } 88 } 89 90 }(); 91 92 if(/audio/.test(this.filter) && 'Audio' in window){ 93 94 var loadMusic=function(){ // Audio load handler 95 for(var i=0,l=_this.audio.length;i<l;i++){ 96 _this.audio[i].onloadedmetadata=function(){ 97 _this.fn && _this.fn(_this.count,++_this.curr); 98 }; 99 _this.audio[i].onerror=function(){ 100 _this.fn && _this.fn(_this.count,++_this.curr); 101 }; 102 } 103 }(); 104 105 } 106 107 if(/video/.test(this.filter) && 'Video' in window){ 108 109 var loadVideo=function(){ // Video load handler 110 111 for(var i=0,l=_this.video.length;i<l;i++){ 112 _this.video[i].onloadedmetadata=function(){ 113 _this.fn && _this.fn(_this.count,++_this.curr); 114 }; 115 _this.video[i].onerror=function(){ 116 _this.fn && _this.fn(_this.count,++_this.curr); 117 }; 118 } 119 120 }(); 121 } 122 123 if(/flash/.test(this.filter)){ 124 125 var loadFlash = function(){ // Flash Laded Handler 126 127 var loaded = 0, 128 num = 0, 129 timer = null, 130 core = function(){ 131 num++; 132 for(var i=0,l=flen;i<l;i++){ 133 if(loaded < flen){ 134 try{ 135 try{ 136 if(embed[i].PercentLoaded()){ 137 138 if(Math.floor(embed[i].PercentLoaded()) == 100 && !embed[i].flag){ 139 loaded++; 140 embed[i].flag = true; 141 _this.fn && _this.fn(_this.count,++_this.curr); 142 } 143 num = 0; 144 145 } 146 }catch(a){ 147 148 if(embed[i].PercentLoaded){ 149 if(Math.floor(embed[i].PercentLoaded())== 100 && !embed[i].flag){ 150 loaded++; 151 embed[i].flag = true; 152 _this.fn && _this.fn(_this.count,++_this.curr); 153 } 154 num = 0; 155 } 156 } 157 }catch(b){} 158 try{ 159 try{ 160 if(object[i].PercentLoaded()){ 161 if(Math.floor(object[i].PercentLoaded())== 100 && !object[i].flag){ 162 loaded++; 163 object[i].flag = true; 164 _this.fn && _this.fn(_this.count,++_this.curr); 165 } 166 num = 0; 167 } 168 }catch(c){ 169 if(object[i].PercentLoaded){ 170 if(Math.floor(object[i].PercentLoaded) == 100 && !object[i].flag){ 171 loaded++; 172 object[i].flag = true; 173 _this.fn && _this.fn(_this.count,++_this.curr); 174 } 175 num = 0; 176 } 177 } 178 }catch(d){} 179 } 180 } 181 182 if(loaded >= flen){ 183 return false; 184 } 185 if(num >= flen){ 186 _this.fn && _this.fn(_this.count,_this.curr+=num); 187 return false; 188 } 189 190 timer = setTimeout(core,1000); 191 }; 192 core(); 193 }(); 194 195 } 196 }; 197 root.loadRes = function(params){ 198 new loadRes(params); 199 }; 200 })(window);
======= 调用方式 =======
1 loadRes({ 2 'filter':'img,flash,audio,video', //用于指定加载何种类型的资源,每种资源用逗号分隔。 3 'fn':function(total,cur){ // 资源加载的回调函数。total:要加载的资源总数，cur当前已完成加载的资源数量。 4 /* 5 if(cur >= total) { 6 Here is Your Code Area 7 } 8 */ 9 } 10 });