首页 > 代码库 > 自己封装的一个LoadRes组件
自己封装的一个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 与 onl oad的(我个人感觉这个不是啥问题)
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 =http://www.mamicode.com/ _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=http://www.mamicode.com/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 handler105 106 for(var i=0,l=_this.video.length;i<l;i++){107 _this.video[i].onloadedmetadata=http://www.mamicode.com/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 Handler121 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组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。