js 外部文件加载处理

概述

前端在日常工作中很大一部分时间是在思考页面的优化方案，让页面载入得更快。鉴于javascript是单线程的事件驱动语言，优化工作之一就是：控制图片、swf、iframe等大流量文件以及js和css等文件的加载顺序，让它们井然有序的进入到页面中，页面就能尽可能完整的呈现在他们眼前。而为了更好的用户体验，我们要知道每个文件触发onload事件的方案，因为它们在各个浏览器中的表现不尽相同。

iframe的 load 事件

在所有为IFRAME动态添加onload监听事件的方法中，只有 使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数，IE6、7、8才有效。所以为 IFRAME 添加load事件完美方案如下：

 // 事件监听兼容方案
 function addEvent(elem,event,fn){
     if (elem.attachEvent) {
         elem.attachEvent('on'+event,fn)
     } else {
         elem.addEventListener(event,fn,false)
     }
 }   

 window.onload = function(){
     var iframeA = document.createElement('iframe');
     iframeA.src = 'http://www.baidu.com'
     addEvent(iframeA,'load',function(){
         document.body.bgColor = '#000'; // 回调函数
     });
     document.body.appendChild(iframeA);
 }

优化页面建议不要嵌套iframe，但是在内部项目还是很常见。其实在IE中，监控iframe加载完毕还可以采取监听 onreadystatechange 事件。

flash 的 load 事件

解决flash的 load主要是两个问题：获取flash对象和flash何时加载完毕。

首先第一个问题：如果object和embed用同样的ID，获取flash对象的时候，IE会认不出。解决方案：

• js判断IE和非IE，IE中是object，非IE中是embed。
• 通过flash对象的PercentLoaded方法，检测其值是否为100。

html代码

<div id="load">flash加载中....</div>
<div id="swfWrap"></div>

css代码

#swfWrap{width:200px;height:200px;}
#load{width:200px;color:#fff;text-align:center;background-color:#eee;}

js代码

 // 封装通过ID获取
 function $(id){
     return document.getElementById(id)
 }

 var isIE = navigator.appVersion.indexOf("MSIE") != -1 ? true: false;

 // 监听flash是否加载成功
 function listenMovie(flash){
     try{
         return Math.floor(flash.PercentLoaded()) == 100 ;
     }catch(e){
         return false;
     }
 }

 // 获取FLASH对象
 function thisMovie(movieName) {
     if (isIE) {
         return window[movieName];
     }
     else {
         return document[movieName];
     }
 }

 // 创建flash
 function createFlash(id,url){
     var html = '<object id="flash" height="200" width="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">'+
                '<PARAM NAME="FlashVars" VALUE="">'+
                 '<PARAM NAME="Movie" VALUE="'+url+'">'+
                 '<PARAM NAME="WMode" VALUE="Transparent">'+
                 '<PARAM NAME="Quality" VALUE="High">'+
                 '<PARAM NAME="AllowScriptAccess" VALUE="always">'+
                 '<embed type="application/x-shockwave-flash" src="'+url+'" id="flashFF" name="flashFF" wmode="window" quality="high" width="200" height="200"></embed>'+
                 '</object>';
     $(id).innerHTML = html;
 }

 window.onload = function(){
     createFlash('swfWrap','flips2.swf')
     var flashObj = isIE ? thisMovie("flash") : thisMovie("flashFF");
     var intervalID =  setInterval(function(){
         if (listenMovie(flashObj)) {
             clearInterval(intervalID);
             intervalID = null;
             $('load').innerHTML = 'flash加载完毕';
         }
     },60)
 }

其中object中的 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 不能去掉，不然IE6下会获取取不到flash对象；embed的name值也不能去掉，不然chrome也获取不到。

这里再提下flash的通信的问题，可以参考 这里，解决方法就是将EMBED的 swliveconnect 属性设置成true，然后就可以跟flash通信了。

IMG的 load 事件

img的load事件，我们使用 new Image()。这里我们得注意 complete 事件。研究网上的得出以下代码：

 var img = new Image();
 img.src= "http://i1.hoopchina.com.cn/user/627/17191627/17191627_big_3.jpg";
 if (img.complete || img.width) {
     alert("该图片已经在缓存中，不需要再下载")
     alert(img.height)
 } else {
     img.onload = function() {
         alert("图片加载完成");
         alert(img.height)
     }
 }

这里网上很多说法是这样子说的，只要加载过一次图片，img.complete就变成true了，图片就存进浏览器缓存，下次再加载就直接忽略了onload事件，直接从缓存里去读取，而不是再重新去下载。但是我在多个变化条件下（同一个浏览器、同一个标签页、清楚缓存、一个页面存在多个相同图片）测试发现：

在f5刷新后，除了火狐是直接从缓存中读取的，也就是执行 if(img.complete || img.width)语句下的，其他的浏览器都是执行else语句里的代码，重新下载图片；ctrl+f5的话，则所有浏览器都是重新下载图片的。

那么 img.complete 的真正意义在于什么呢？一张页面中，如果存在多个图片地址相同的 img 标签 ，浏览器只会请求一次图片链接，而不是每个img都去请求。

使用 new Image() 请求相同的 gif 图片时，img.complete 貌似不准确，不知道什么原因，难道是因为 gif 动态图是由多张静态图组成？。

而网上说的，将src赋值放在onload事件之后，并不是从根本原因上解决问题。

JS的 load 事件

首先准备一下即将要用到的辅助函数：

 function delay_file(url) {

     var type = url.split('.'),
         file = type[type.length - 1];

     if (file == 'css') {
         var obj = document.createElement('link'),
             lnk = 'href',
             tp = 'text/css';
         obj.setAttribute('rel', 'stylesheet');
     } else {
         var obj = document.createElement('script'),
             lnk = 'src',
             tp = 'text/javascript';
     }

     obj.setAttribute(lnk, url);
     obj.setAttribute('type', tp);
     file == 'css' ? document.getElementsByTagName('head')[0].appendChild(obj) : document.body.appendChild(obj);
     return obj;

 };  

考虑到js加载的特殊性，浏览器引擎在解析js时，对其他资源和文档都会停止。所以我们采用以上方法来异步加载js。而如果想给它增加 回调函数 呢？非IE下 onload 是完美支持的，IE下我们则用 onreadystatechange 事件监听 readyState 值变化。

  function loadjs(url, callback) {

     var elem = delay_file(url);
     var isIE = navigator.userAgent.indexOf('MSIE') == -1 ? false : true;

     if ( isIE ) {
         elem.onreadystatechange = function() {
             if (this.readyState && this.readyState == 'loading') return;
             if (callback) {
                 callback();
             }
         };
     } else {
         elem.onload = function() {
             if (callback) {
                 callback();
             }
         };
     }

 }

CSS的 load 事件

CSS 的load事件跟以上讲的 onload 事件兼容性却是相反的，其他浏览器不支持 load 事件，在IE浏览器中反而是支持的。那怎么办呢？

seajs给出了一个方案：

 function loadcss(url, callback) {

     var elem = delay_file(url);

     if (elem.attachEvent) {
         elem.attachEvent('onload', callback);
     } else {
         setTimeout(function() {
             poll(elem, callback);
         }, 0);
     }

     function poll(_elem, callback) {

         var isLoaded = false;
         var sheet = _elem['sheet'];
         var isOldWebKit = (navigator.userAgent.replace(/.*AppleWebKit\/(\d+)\..*/, '$1')) * 1 < 536;

         if (isOldWebKit) { //webkit 版本小于 536
             if (sheet) {
                 isLoaded = true;
             }
         } else if (sheet) {
             try {
                 if (sheet.cssRules) {
                     isLoaded = true;
                 }
             } catch (ex) {
                 if (ex.code === 'NS_ERROR_DOM_SECURITY_ERR') {
                     isLoaded = true;
                 }
             }
         }

         if (isLoaded) {
             setTimeout(function() {
                 callback();
             }, 1);
         } else {
             setTimeout(function() {
                 poll(_elem, callback);
             }, 1);
         }
     }

 }

貌似linkNode在加载前后 linkNode.sheet 和 linkNode.sheet.cssRules 的值会发生变化。我觉得还有一个方法虽然有点绕，但是也是最有效的方法：检测某个类名下的CSS属性是否存。