DOM readyState属性共5中状况
-
uninitialized
:初始状况 -
loading
:document加载中 -
loaded
: document加载完成 -
interactive
:已加载并可与用户交互,但还须要加载图片等其他资本 -
complete
:悉数资本加载完成
DOM文档加载递次:
- 剖析HTML构造
- 加载外部剧本和样式表文件(loading)
- 剖析并实行剧本
- DOM树构建完成(readyState:interactive)
- 加载外部资本文件(图片等)
- 页面加载完成(readyState:complete)
动态加载大众要领
var DynamciLoadUtil = {
// 动态加载外部js文件,并实行回调
loadJS: function(url, callback){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
if(typeof callback == 'function'){
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == 'loaded'
|| this.readyState == 'complete'){
callback();
script.onload = script.onreadystatechange = null;
}
}
}
document.body.appendChild(script);
//document.getElementsByTagName('body')[0].appendChild(script);
},
// 行内体式格局动态加载js代码
loadJSText: function(jsText){
var script = document.createElement('script');
script.type = 'text/javascript';
try {
// Firefox,Safari,Chrome,Opera支撑
script.appendChild(document.createTextNode(jsText));
} catch(ex){
// IE初期的浏览器,须要运用script的text属性来指定js代码
script.text = jsText;
}
document.body.appendChild(script);
},
// 动态加载外部CSS文件
loadCSS:function(url){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.url = url;
document.getElementsByTagName('head')[0].appendChild(link);
},
// 运用<style>标签包括嵌入式CSS
loadCSSText: function(cssText){
var style = document.createElement('style');
style.type = 'text/css';
try{
// Firefox,Safari,Chrome,Opera支撑
style.appendChild(document.createTextNode(cssText));
} catch(ex){
// IE初期浏览器,须要运用style元素的styleSheet属性的cssText属性
style.styleSheet.cssText = cssText;
}
}
}