1.预加载图片
图片除了可以用创建 img dom 节点的方法加载外,还可以用常见的缓存图片方法,Image对象加载,基本上创建出来的img dom node 和 new Image 对象 一样的,(除了没有实体标签不可以显示出来) ,但是 ie 对于从缓存中加载的图片触发事件有区别 (和事件添加位置有区别) ,详见代码。特别注意判断缓存加载,有的浏览器(ie chrome)缓存不触发load事件,应该判断img.complete。
2.动态加载 script
script 不像图片有专有的 javascript 对象,只能通过创建标签的方式加载script,但是 ie 和其他浏览器有区别,其他浏览器可以判断 load 事件 ,像图片一样,而 ie 不会触发这个事件,只能通过判断 readystate 的方式 来解决。
ps:
动态创建标签时,firefox当设置src时并不会立即开始下载脚本,只有将脚本标签 append 到 document 时,才开始下载,而image则在img src设置后立即开始下载,即使还没有被 append 到 document。
ie 浏览器判断 onreadystatechange 比较怪异,loaded 和 complete 每个并不确定出现,所以最好两者都判断,但为了防止执行逻辑两次,脚本加载后将 onreadystatechange 置空为好 ,如:
function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.body.appendChild(script); }
updated : 2011-05-11
在 ie6,7,8 下有缓存情况,嵌套的动态加载会出问题
loadScript("right.js",function(){ loadScript("right2.js",function(){alert(2);}); });
则 alert(2) 也不会执行!
举个例子From Even Faster Websites :
Coupling Asynchronous Scripts ,若一段inline脚本依赖于一个外部脚本文件,而我们用script dom 添加的方式载入外部脚本,因为除了firefox 都不能保证等外部脚本加载完毕再执行内部脚本,所以的采用其他方法。
1.判断script 状态
var aExamples = [['couple-normal.php', 'Normal Script Src'],...]; function init() { //依赖于menu.js EFWS.Menu.createMenu('examplesbtn', aExamples); } var domscript = document.createElement('script'); domscript.src = "menu.js"; //opera 会 load 两次,so 设置变量 domscript.onloadDone = false; //标准方式 domscript.onload = function() { domscript.onloadDone = true; init(); }; //ie 和 opera ? domscript.onreadystatechange = function() { if ( "loaded" === domscript.readyState && ! domscript.onloadDone ) { domscript.onloadDone = true; init(); } } document.getElementsByTagName('head')[0].appendChild(domscript);
2.Degrading Script Tags
ejohn 在他的blog中提出了这个优雅而又怪异的方法 ,关键要在外部脚本后加入代码执行外部脚本的 innerHTML
如上述的 menu.js,最后添加
var scripts = document.getElementsByTagName("script"); var cntr = scripts.length; while ( cntr ) { var curScript = scripts[cntr-1]; //如果找到它自己 if ( -1 != curScript.src.indexOf("menu.js") ) { //执行依赖它的内部脚本 eval( curScript.innerHTML ); break; } cntr--; }
使用 menu.js 的代码 :
<script type="text/javascript"> var aExamples = [['couple-normal.php', 'Normal Script Src'],...]; function init() { EFWS.Menu.createMenu('examplesbtn', aExamples); } var domscript = document.createElement('script'); domscript.src = "menu.js"; //设置依赖的要执行的代码 if ( -1 != navigator.userAgent.indexOf("Opera") ) { domscript.innerHTML = "init();"; } else { domscript.text = "init();"; } document.getElementsByTagName('head')[0].appendChild(domscript); </script>
3.其他方法:
比如 setTimeout polling,外部脚本硬编码callback,window.onload 再执行内部脚本,都不如上述两个方法。
注意: 异步新载入的script标签即使后来删除掉,其里面定义的函数,变量仍然存在于window 中,所以请不要将这种方式滥用,建议只用于跨域的数据交换 。
2.1 script 加载完毕的另一种判断,反向通知
2009-07-03 修正
但是 script 和 img不同的是,异步载入的javascript可以反向通知调用方,即调用调用方的代码告知自己已经载入完毕。
如 Ext.data.ScriptTagProxy
这就需要异步载入的javascript要调用调用方提供的临时的一个全局函数,调用完毕将这个全局函数删除。
如 ScriptTagProxy :
window[trans.cb] = undefined; try{ delete window[trans.cb]; }catch(e){}
每次请求都临时产生一个全局函数window[trans.cb]来等待异步载入的javascript来执行。
注意:
try{
delete window[trans.cb];
}catch(e){}
由于 IE不能清除window上的属性,会抛出无法操作的异常 ,这里捕捉一下,我认为不清除也无所谓,设成 undefined 就可以垃圾回收了呀。
ps:关于delete的详细解释 :Understanding delete
2.2 关于 window 属性清除问题还要注意:
如果不是显式设置 window.property,那么property ie ff都无法清除,但是ff不会报错的。如:
var test=function (){ alert(1); }; /*或者 function test(){ alert(1); }; */ delete window["test"]; delete test; alert(window["test"]);
2.3 多个异步脚本加载顺序问题
通过同时动态创建多个脚本节点来异步加载脚本,ie与firefox之间也有差异,ie只要节点src设置即可开始下载,firefox则要将节点插入到文档才开始下载,虽然它们都会同时开始下载,但是完成的通知时间不同,firefox的通知时间与插入文档的顺序相同
(注:firefox 3.6 script引入async属性 ,默认为false,若设为true则和ie表现一致,firefox 4.0 起参数默认 true )
,而ie则哪个先下载完先通知哪个:(可使用fiddler模拟拨号上网测试)
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>
<script>
YUI({
filter: "DEBUG"
}).use("*", function (Y) {
var script1 = document.createElement("script");
script1.setAttribute("src", "http://yui.yahooapis.com/combo?3.1.0/build/oop/oop-min.js&3.1.0/build/dom/dom-min.js&3.1.0/build/pluginhost/pluginhost-min.js&3.1.0/build/event-custom/event-custom-min.js&3.1.0/build/node/node-min.js&3.1.0/build/event/event-min.js&3.1.0/build/attribute/attribute-base-min.js&3.1.0/build/base/base-min.js&");
console.log(script1.async);
//script1.async=true;
document.getElementsByTagName("head")[0].appendChild(script1);
script1.onload = function () {
console.log("script1 load");
};
script1.onreadystatechange = function () {
var rs = this.readyState;
if ("loaded" === rs || "complete" === rs) {
// Y.log(id + " onreadstatechange " + url, "info", "get");
script1.onreadystatechange = null;
console.log("script1 onreadystatechange");
}
};
var script2 = document.createElement("script");
script2.setAttribute("src", "http://yui.yahooapis.com/combo?3.1.0/build/dom/dom-min.js");
document.getElementsByTagName("head")[0].appendChild(script2);
script2.onload = function () {
console.log("script2 load");
};
script2.onreadystatechange = function () {
var rs = this.readyState;
if ("loaded" === rs || "complete" === rs) {
// Y.log(id + " onreadstatechange " + url, "info", "get");
script2.onreadystatechange = null;
console.log("script2 onreadystatechange");
}
};
});
</script>
PS : defer 和 async 作用并不一样,图解:
http://msdn.microsoft.com/en-us/library/ms533719%28VS.85%29.aspx
https://developer.mozilla.org/En/HTML/Element/Script
http://www.w3.org/TR/html5/scripting-1.html#script
2.4 动态添加脚本的同步与异步问题
当动态添加脚本时,不同的应用场景可能需要不同的脚本处理顺序,注意:当动态添加内联脚本时为同步,添加外部脚本时为异步:
同步:
var script1 = document.createElement("script"); document.getElementsByTagName("head")[0].appendChild(script1); script1.text="alert('script1 loaded');"; alert(1);
输出:script1 loaded 1
异步:
var script2 = document.createElement("script"); script2.setAttribute("src", "test.js"); document.getElementsByTagName("head")[0].appendChild(script2); script2.onload = function () { alert("script2 load"); }; script2.onreadystatechange = function () { var rs = this.readyState; if ("loaded" === rs || "complete" === rs) { // Y.log(id + " onreadstatechange " + url, "info", "get"); script2.onreadystatechange = null; alert("script2 load"); } }; alert(2);
输出:2 test.js loaded script2 loaded
test.js:
alert("test.js loaded");
2.5 出错判断
2011-03-03 note :
当动态加载的脚本发生错误(比如服务器返回 404 )时,ie和标准浏览器(firefox,chrome)表现也有区别:
1. ie 在 404 情况下仍然会使得脚本的 readyState 变为 loaded 或者 complete,所以如果想知道是否出错,估计得修改业务逻辑 。
2. firefox,chrome 在服务器出错时会触发 error 事件,通过监听 error 以及 load 可立即知道成功与否。
总体测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XXX</title> <script src="ext-base.js" type="text/javascript"></script> <script src="ext-core.js" type="text/javascript"></script> </head> <body> <input type="button" value="load image" id="test" /> <input type="button" value="load script" id="test2" /> <script type="text/javascript"> Ext.DomHelper.useDom = true; Ext.onReady(function () { Ext.get('test2').on('click', function (evt) { //即使移除script标签,函数依旧在内存中存在 if (Ext.get('st')) Ext.get('st').remove(); //so assign to undefined explicitly window['writeflashhtml'] = undefined; //sorry can not delete 在window声明的函数 //delete window['writeflashhtml']; //alert(typeof window['writeflashhtml']); var el = Ext.DomHelper.append(Ext.getBody(), { tag: 'script', id: 'st' //, //src:"http://img.12580zgz.com/js/flashobj.js" }, true); el.dom.src = "http://img.12580zgz.com/js/flashobj.js"; /* ie 不会触发load 事件,ie 以外浏览器 会 */ el.on('load', function () { alert("non-ie createElement onload:" + writeflashhtml); }); /* ie 这样判断是否加载完毕 */ el.dom.onreadystatechange = function () { if ( //this.readyState == 4 this.readyState == 'complete' || this.readyState == 'loaded') { alert(this.readyState + " : ie createElement onload:" + writeflashhtml); } el.dom.onreadystatechange = null; }; evt.stopEvent(); }); Ext.get('test').on('click', function (evt) { var im = new Image(); /* 将onload 移到前面 ,ie 则每次都会触发onload 事件 im.οnlοad=function(){ alert("new Image load:"+this.width); } */ im.src = "http://img.12580zgz.com/images/logo-w3c.gif"; /* 将onload 放在后面,则 ie取缓存图片时不会触发onload事件*/ // im.addListener("load",function(){}); im.onload = function () { alert("new Image load:" + this.width); } //图片来自缓存触发,或者到这已经图片载入,所有浏览器使用 if (im.complete) { alert("new Image complete:" + im.width); } var el = Ext.DomHelper.append(Ext.getBody(), { tag: 'img' }, true); /* 将onload 移到前面 ,ie 则每次都会触发onload 事件 el.on('load',function(){ alert("createElement onload:"+this.dom.width); }); */ el.dom.src = "http://img.12580zgz.com/images/logo-w3c.gif"; /* 将onload 放在后面,则 ie取缓存图片时不会触发onload事件*/ el.on('load', function () { alert("createElement onload:" + this.dom.width); }); //来自缓存触发,或者到这已经图片载入,所有浏览器使用 if (el.dom.complete) { alert("createElement complete:" + el.dom.width); } evt.stopEvent(); }); }); </script> </body> </html>
ps: Iframe与窗口文档 相关操作
javascript 与 iframe
页面加载判断与onload 研究
参考文章:
Loading JavaScript without blocking