自己封装的一个LoadRes组件
Posted 卷柏的花期
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己封装的一个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 ： 但是我的“第七感”，还是可以感觉到这个组件肯定是有问题的，但是受限于自身的实力也只能做到这样了，所以这里主要是抛砖引玉之用，希望各路大神能多多提点意见，或者优化之类的。感激不尽！！
=========================================
下面是具体的代码：
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 73 if(!_this.readyState || _this.readyState == ‘loaded‘ || _this.readyState == ‘complete‘){ 74 _this.onreadystatechange = _this.onload = null; 75 _this.fn && _this.fn(_this.count,++_this.curr); 76 } 77 }; 78 img.onerror=img.onabort=function(){ 79 _this.onerror=_this.onabort=null; 80 _this.fn && _this.fn(_this.count,++_this.curr); 81 }; 82 } 83 } 84 85 }(); 86 87 if(/audio/.test(this.filter) && ‘Audio‘ in window){ 88 89 var loadMusic=function(){ // Audio load handler 90 for(var i=0,l=_this.audio.length;i<l;i++){ 91 _this.audio[i].onloadedmetadata=function(){ 92 _this.fn && _this.fn(_this.count,++_this.curr); 93 }; 94 _this.audio[i].onerror=function(){ 95 _this.fn && _this.fn(_this.count,++_this.curr); 96 }; 97 } 98 }(); 99 100 } 101 102 if(/video/.test(this.filter) && ‘Video‘ in window){ 103 104 var loadVideo=function(){ // Video load handler 105 106 for(var i=0,l=_this.video.length;i<l;i++){ 107 _this.video[i].onloadedmetadata=function(){ 108 _this.fn && _this.fn(_this.count,++_this.curr); 109 }; 110 _this.video[i].onerror=function(){ 111 _this.fn && _this.fn(_this.count,++_this.curr); 112 }; 113 } 114 115 }(); 116 } 117 118 if(/flash/.test(this.filter)){ 119 120 var loadFlash = function(){ // Flash Laded Handler 121 122 var loaded = 0, 123 num = 0, 124 timer = null, 125 core = function(){ 126 num++; 127 for(var i=0,l=flen;i<l;i++){ 128 if(loaded < flen){ 129 try{ 130 try{ 131 if(embed[i].PercentLoaded()){ 132 133 if(Math.floor(embed[i].PercentLoaded()) == 100 && !embed[i].flag){ 134 loaded++; 135 embed[i].flag = true; 136 _this.fn && _this.fn(_this.count,++_this.curr); 137 } 138 num = 0; 139 140 } 141 }catch(a){ 142 143 if(embed[i].PercentLoaded){ 144 if(Math.floor(embed[i].PercentLoaded())== 100 && !embed[i].flag){ 145 loaded++; 146 embed[i].flag = true; 147 _this.fn && _this.fn(_this.count,++_this.curr); 148 } 149 num = 0; 150 } 151 } 152 }catch(b){} 153 try{ 154 try{ 155 if(object[i].PercentLoaded()){ 156 if(Math.floor(object[i].PercentLoaded())== 100 && !object[i].flag){ 157 loaded++; 158 object[i].flag = true; 159 _this.fn && _this.fn(_this.count,++_this.curr); 160 } 161 num = 0; 162 } 163 }catch(c){ 164 if(object[i].PercentLoaded){ 165 if(Math.floor(object[i].PercentLoaded) == 100 && !object[i].flag){ 166 loaded++; 167 object[i].flag = true; 168 _this.fn && _this.fn(_this.count,++_this.curr); 169 } 170 num = 0; 171 } 172 } 173 }catch(d){} 174 } 175 } 176 177 if(loaded >= flen){ 178 return false; 179 } 180 if(num >= flen){ 181 _this.fn && _this.fn(_this.count,_this.curr+=num); 182 return false; 183 } 184 185 timer = setTimeout(core,1000); 186 }; 187 core(); 188 }(); 189 190 } 191 }; 192 root.loadRes = function(params){ 193 new loadRes(params); 194 }; 195 })(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 });
以上是关于自己封装的一个LoadRes组件的主要内容，如果未能解决你的问题，请参考以下文章
游戏开发-cocos creator踩坑-cc.loader.loadRes