DOM何时Ready
由于script标签在被加载完成后会立即执行其中代码，如果在代码中要访问HTMLElement，可是这时候元素还没有加载进来，所以对元素的操作统统无效。
最早的时候使用window.onload = function(){...}，使得代码在页面完全加载完成后执行，这种方法对于页面资源很小的情况下是没问题的。弊端在于有时候页面中回加载一些比较费时的img、flash等资源，这种情况下浏览器会一直等待这些资源加载完成后再执行js代码。而浏览器中有DOM树跟Render树的区分，我们当然希望DOM树生成后便可以执行js代码，而不需要一定等待Render树完成后采取执行。
HTML5中加入了DOMContentLoaded事件，该事件在DOM树加载完成后便会触发（实际上大多数浏览器通常在样式资源加载完成后才会触发该事件，这个时候DOM可能早就加载完成了）。
对于不支持DOMContentLoaded事件的浏览器，我们通过监听document的onreadystatechange事件来判断DOM加载情况。从理论上来说，document有一属性名唤readyState，在页面加载过程中该属性的值会经过三次变化：loading（加载阶段）、interactive（DOM解析完成）、complete（完全加载完成，相当于onload）。但是浏览器的有时候并不会依次经过这三次变化。
在IE中有某些DOM方法，必须在DOM加载完成后方可调用（注意是调用，不是访问），一般情况下通过轮询调用doScroll方法来检测，当调用成功时表明DOM已加载完成。但需要注意的是，当页面中有iframe元素时，会等到iframe完全渲染结束后，调用才可成功，这时候于调用onload方法没什么区别。还有一点，在IE中，document.body必须在DOM解析完成后才可以访问body元素，而FF中即使DOM没有加载完成也可访问，这一点经常在IE中被用作判断DOM加载完成时的一个依据。
下面是参考资料后，自己写的一个domready方法：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>MyDomReady</title> <script type="text/javascript">
window.myDOMReady = function(callback){
myDOMReady.isReady = false; var isBindReady = false;
if (typeof callback === "function"){
myDOMReady.readyCallback = callback;
}else{
myDOMReady.readyCallback = function(){};
} bindReady(); function onReady(){
console.log("onReady Function");
if (!myDOMReady.isReady){
if (!document.body){
setTimeout(onReady, 4);
return;
}
myDOMReady.isReady = true;
console.log('ready');
myDOMReady.readyCallback();
}
}; function domReady(){
if (document.addEventListener){
console.log('DOMContentLoaded');
}else if (document.attachEvent){
console.log("onreadystatechange ", document.readyState);
}
onReady();
} function bindReady(){
if (isBindReady){
return;
}
isBindReady = true; if (document.addEventListener){
document.addEventListener('DOMContentLoaded', domReady, false);
}else if (document.attachEvent){
document.attachEvent('onreadystatechange', domReady); var hasDoScroll = !!document.documentElement.doScroll,
noFrame = window.frameElement === null;
if (hasDoScroll && noFrame){
checkDoScroll();
}
}
window.onload = function(){
console.log('onloaded');
onReady();
};
}; function checkDoScroll(){
if (myDOMReady.isReady){
return;
}
try{
document.documentElement.doScroll('left');
}catch(err){
setTimeout(checkDoScroll, 4);
return;
}
console.log('checked');
onReady();
};
};
</script>
<script type="text/javascript">
myDOMReady(function(){
var map = document.getElementById('map');
if (map){
alert('Yes');
}else{
alert('No!');
}
});
var map2 = document.getElementById('map');
if (map2){
alert('Yes');
}else{
alert('No!');
}
</script>
</head> <body class="claro">
<input id="ipt" type="file" accept="image/png" >
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:false"
style="width:100%;height:100%;margin:0;"> <div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0;"> <div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery" ></div></div>
</div>
</div> </div>
</div>
</body> </html>
以下为chrome、FF、IE9和IE7、8中的测试结果
本人能力有限，其中有不足的地方欢迎各位道友不吝指正
DOM何时Ready的更多相关文章
- DOM加载过程中ready和load的区别
在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...
- jquery的ready方法（DOM是否加载完）详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- jQuery实现DOM加载方法源码分析
传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... } 但 ...
- (转载)jQuery 1.6 源码学习（二）——core.js[2]之extend&ready方法
上次分析了extend方法的实现,而紧接着extend方法后面调用了jQuery.extend()方法(core.js 359行),今天来看看究竟core.js里为jQuery对象扩展了哪些静态方法. ...
- DOJO DOM 功能
In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browse ...
- jQuery的document ready与 onload事件——你真的思考过吗？
在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...
- $(document).ready vs $(window).load vs window.onload
原文地址: $(document).ready vs $(window).load vs window.onload $(document).ready We execute our code whe ...
- jquery ready 延迟
$.holdReady(true);//延迟 $.holdReady(false);//解延迟 用于下载文件的时候,异步操作 $.holdReady(true); $.getScript(" ...
- $( document ).ready()&$(window).load()
$( document ).ready() https://learn.jquery.com/using-jquery-core/document-ready/ A page can't be man ...
随机推荐
- Arch Linux 简易打包指南
本文时代久远,请参阅更可靠的:Arch User Repository (简体中文) - 分享和维护软件包 这两天给 Kreogist µ 打 Arch Linux 包,照着 wiki 跟着搞,同时在 ...
- 关于fast cgi和php-fpm的关系
相关文档“https://segmentfault.com/q/1010000000256516%20” 一.什么是cgi cgi是一个协议,这个协议规定我们web服务器访问的时候,nginx和php ...
- win10 virtualbox5, ubuntu16.04 xshell5配合使用
这个搭配很好用,各软件的安装很容易,ubuntu安装进virtualbox后安装增强功能,然后将网络连接方式改为桥接,直接改为桥接就可以了,其他的不用变,这个比以前的版本好用多了.这个桥接解决了宿主机 ...
- html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...
- oc数据类型
数据类型:基本数据类型.指针数据类型 基本数据类型:数值型.字符型(char).布尔型.空类型(void)指针数据类型:类(class).id数值型:整数类型int.浮点型float.doublec和 ...
- ubuntu安装goldendict以及添加本地词典和在线词典
软件在ubuntu软件中心安装就可以了, 关于网络词典, 推荐有道在线词典,网址http://dict.youdao.com/search?q=%GDWORD%&ue=utf8 添加方法:编辑 ...
- ulipad源码包配置环境及安装
一.准备下载的安装包: 1.python(我电脑配置的是2.7)下载地址http://pan.baidu.com/s/1qWrGZk4 2.wxpython(我这里是wxpy3.0,配套python2 ...
- 自定义actionbar标题
这是我自己封装的一个activity,主要作为所有Activity的基类,可以一键关掉所有的activity, 并共享一个自定义actionbar.直接切入主题吧. 第一步就是创建自定义标题的布局文件 ...
- linux下rm -r误删NTFS文件恢复方法
一时疏忽,手一抖,把整个挂载的F盘删了一半!顿时傻眼!! 被删的F盘是Windows下NTFS分区,在Ubuntu12.04中挂载了F盘,使用rm命令时粗心大意,误删了一半的数据. 血的教训告诉我们, ...
- 轻松创建R语言函数包
讲真,用R这么几年,始终未尝试过写自己的包,看来这就是我与真正程序员的差距了——编程习惯等于没有. 昨天一个偶然的机会想开始写自己的工具包,发现了前期教程的有一些过时.于是,写一个**windows* ...