关于link跟script标签的onload与onreadystatechange事件的支持
关于link和script标签的onload与onreadystatechange事件的支持
感谢来访博客,多多提意见,谢谢
研究编写这个专题的心思来源于阳哥分享的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 写道
恩。不错。
感谢来访博客,多多提意见,谢谢