关于DOMContentLoaded
也许还有朋友不太清楚DOMContentLoaded这个事件。简单的说，这个事件就是要在大多数情况下去替代window.onload事件，因为window.onload事件必须要等待页面所有元素的资源都下载完毕时才触发。
这个事件实际是上w3c推荐的标准事件，是在DOM树建成的时候触发，因此要比onload事件快很多。ff, opera高版本已经支持了该事件。而IE在IE8里依然没有想加这个事件的意思，为了实现IE与w3c的兼容，我们有必要为IE做一件“好事”。
一般是两种方法。
- 一种是创建空script标签，属性拥有defer，然后待onreadystatechange为complete时激发DOMContentLoaded
- 一种是通过调用doScroll('left')的原理去判断DOMContentLoaded
第一种方法
var $ = document.getElementById;
var fireDOMReadyEvent = function () {
alert('DOM content loaded----------------http://www.never-online.net/blog/');
}
if (!!window.ActiveXObject) {
// Internet Explorer use defer attribute
var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';
document.write('<SCRIPT id=____dom_content_ready__ src="' + src + '" defer><\/script>');
$('____dom_content_ready__').onreadystatechange = function() {
if (this.readyState == 'complete') {
this.onreadystatechange = null;
fireDOMReadyEvent();
}
};
}
//]]></script>
<body>
<img src="http://img9.zol.com.cn/desk_pic/big_304/303619.jpg">
</body>
看上去应该没有什么问题了。但实际在使用当中还是遇到不少的问题，主要是协议，还有iframe。https协议需要单独判断。
iframe的问题在Jerry使用的时候发现比较大的问题，比如
var $ = document.getElementById;
var fireDOMReadyEvent = function () {
alert('DOM content loaded----------------http://www.never-online.net/blog/');
}
if (!!window.ActiveXObject) {
// Internet Explorer use defer attribute
var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';
document.write('<SCRIPT id=____dom_content_ready__ src="' + src + '" defer><\/script>');
$('____dom_content_ready__').onreadystatechange = function() {
if (this.readyState == 'complete') {
this.onreadystatechange = null;
fireDOMReadyEvent();
}
};
}
//]]></script>
<iframe src="http://www.csdn.net"></iframe>
它会在iframe加载完毕的时候才触发事件，显然不是我们所需要的。
也因为如此，我们现在很流行第二种方案：用doScroll方法。这主要是利用doScroll是是DOM树形成之后才可以操作。
var $ = document.getElementById;
var fireDOMReadyEvent = function () {
window.clearInterval(timer)
alert('DOM content loaded----------------http://www.never-online.net/blog/');
}
if (!!window.ActiveXObject) {
// Using doScroll method to instead of script tag to deal with DOM content loaded event
var timer = null;
timer = setInterval(function () {
try {
document.body.doScroll('left');
fireDOMReadyEvent();
} catch(ex) {};
});
}
//]]></script>
<iframe src="http://www.csdn.net"></iframe>
<img src="http://img9.zol.com.cn/desk_pic/big_304/303619.jpg">
以前听同事提过在YUI里有两种ready事件，一种是DOMContentLoaded，一种是ElementReadyContentReady(怿飞提醒，修正）。还没有详细的去看代码，有兴趣的朋友也可看一下。
今天顺便看了一下YUI，判断DOMContentLoaded，大概是这样。
p.doScroll('left');
fireDOMLoadedHandle();
个人认为此方法有一个问题，p在IE6下是不会释放的，所以会有memory leak。
而mootools里的方法也是有问题的：
document.body.appendChild(el);
el.innerHTML = "left";
el.parentNode.removeChild(el);
clearInterval(interval);
ready();
IE6下假如是在body未在加完之前运行会有，HTML无法结束的警告。（具体出错信息记不清了-_-!）
关于DOMContentLoaded的更多相关文章
- 谈谈DOMContentLoaded：Javascript中的domReady引入机制
一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...
- 事件DOMContentLoaded和load的区别
1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...
- window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕
http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...
- DOMContentLoaded实现
IE系列直到IE9才支持DOMContentLoaded事件,对于IE8及其之前版本,如果html内没有框架,则可以采用document.documentELement.doScroll来判断 是否构 ...
- window.onload、DOMContentLoaded和$(document).ready()
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- DOMContentLoaded和load
/* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * ...
- DOMContentLoaded和jquery的ready和window.onload的顺序
document.addEventListener('DOMContentLoaded', function(){ alert(1) }); window.onload=function(){ ale ...
- HTML5中的DOMContentLoaded 和 touchmove
Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...
- 利用doScroll在IE浏览器里模仿DOMContentLoaded
稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...
- DOMContentLoaded事件
今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...
随机推荐
- Nginx访问限速配置方法详解
开发测试阶段在本地限速模拟公网的环境,方便调试.投入运营会有限制附件下限速度,限制每个用户的访问速度,限制每个IP的链接速度等需求. 配置简单,只需3行,打开"nginx根目录/conf/n ...
- 十一、oracle 数据库管理员
一.数据库管理员每个oracle数据库应该至少有一个数据库管理员(dba),对于一个小的数据库,一个dba就够了,但是对于一个大的数据库可能需要多个dba分担不同的管理职责.那么一个数据库管理员的主要 ...
- adb shell am 的用法
adb shell am instrument [options] <COMPONENT> 作用:启动对instrument实例的监视. 参数[options]: -e <key&g ...
- Default Constructor的构造操作
Default Constructor的构造操作 C++ Annotated Reference Manual书中的Section 12.1说过:default constructor 只有在编译器需 ...
- python实现邮件发送完整代码（带附件发送方式）
实例一:利用SMTP与EMAIL实现邮件发送,带附件(完整代码) __author__ = 'Administrator'#coding=gb2312 from email.Header import ...
- CSS3秘笈：第一章
1.<div>和<span>标签: <div>和<span>标签:就像是一个空的容器,我们要往里面填充内容.一个div就是一个块,意味着它的前后都要空一 ...
- git(创建,提交,回退)
创建版本库 2334次阅读 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以 ...
- MC 自己平均
using System; using System.Drawing; using System.Linq; using System.Collections; namespace PowerLang ...
- 第4章 流程控制----编写Java程序，使用while循环语句计算1+1/2!+1/3!+...+1/20!之和
package four; public class fouronetwo { public static void main(String args[]){ double sum = 0,a = 1 ...
- flashbuilder mx组件 MenuBar
来源:http://www.cuplayer.com/player/PlayerCode/Flex/2013/0118661.html <fx:Script> <![CDATA[ i ...