研究编写这个专题的心思来源于阳哥分享的javascript加载总结的调研文档。
?
当然这个话题很火也很深，路也很长，开启这个话题，简单地普及一些知识。
?
简单记录，学习一下。
?
开始要说的可能就是onload与onreadystatechange的api支持
?
其实简单地去理解的话，对于外部资源的应用有两个我们head里面常用的标签link和script
?
测试浏览器版本说明
- ?Opera ?11.51
- ?Chrome?6.0.401.1
- ?FF 3.6.23
a. ?link标签
- ?link标签的静态支持
?? ?------个人定义的所谓静态其实就是
<link type="text/css" rel="stylesheet" href="****" />?
?
?? ?1. IE 6/7/8/9多支持onload，
?? ? ? ?Opera支持onload
?? ? ? ?对于onreadystatechange事件，有两个状态readyState（loading,complete）
?
?? ?2. FF/Safari/Chrome不支持onload,
?? ? ? ?也不支持onreadystatechange
?
?
- link标签的动态支持
?? ?------个人定义的所谓动态是js去创建link标签
<script type="text/javascript">
/*封装代码
*创建给定属性的html元素
*@param type ----创建元素的类型
*@param attrs ----属性集合
*@return elment -------带有给定属性的元素对象
*/
function createTag(type,attrs){
var element = document.createElement(type),
item ;
for(item in attrs){
//加上一层本地属性的判断
if(attrs.hasOwnProperty(item)){
element.setAttribute(item,attrs[item]);
}
}
return element;
}
var link = createTag('link',{
type : "text/css",
rel : "stylesheet",
href : "***"
});
link.onreadystatechange = function(){
//执行代码
}
link.onload = function(){//执行代码}
document.getElementsByTagName('head')[0].appendChild(link);
</script>
??1. ?IE 6/7/8/9支持onload和onreadystatechange
??2. ?Opera也支持
??3. ?FF/Chrome/Safai 不支持
b. ?script标签
??
- ??script的静态支持
??-----所谓的静态就是
<script type="text/javascript" src="**"></script>
?1. ?IE 6/7/8触发onreadystatechange
?2. ?IE 9 先触发onreadystatechange 后触发onload
?3. ?FF/Safari/Chrome/Opera 触发onload
- ?script的动态支持
ie下的预加载
window.onload = function(){
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onreadystatechange = function(){
if(this.readyState == 'loaded'){
alert("preload");
document.getElementsByTagName("head")[0].appendChild(script);
}else if(this.readyState == "complete"){
this.onreadystatechange = null;
}
}
script.src="****jquery.min.js?_="+(new Date()).getTime();
}
??
?
1 楼
Hafeyang
2011-10-17
恩。不错。
2 楼
zhangyaochun
2011-10-18
Hafeyang 写道
恩。不错。
感谢来访博客，多多提意见，谢谢