这两周一直太忙，没有好好处理上上上周遇到的一个让我加班到凌晨的问题，这个问题是判断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
}
*/
}
});