Jan 05, 2008
随着ajax的流行，页面中的JS代码越来越多。一般我们用JS处理页面时，都是使用window.onload等到页面加载完毕后再来处理，否则有时会出现文档未加载完毕而报的错误了。
但window.onload有一个不好的地方，它会等到整个页面（包括图片，flash等）全部加载完毕后，才会执行。一个页面中如果有很多图片，中间会有较长的延迟才会去执行我们的代码。
具体效果：http://www.ajaxeye.com/labs/domready.htm（注意页面中的两个小方块颜色，一开始默认都是红色，注意颜色的改变）
上面页面中，会在DOM树加载完毕后和window.onload时分别改变两个小方块的颜色为绿色。
解决方法可以参见英文原文：
http://dean.edwards.name/weblog/2005/09/busted/
http://dean.edwards.name/weblog/2006/06/again/
解决方法就是想办法监听DOM树加载完毕的事件，等DOM树载完毕后执行我们的代码
- Firefox、Opera9下，可以监听DOMContentLoaded事件来处理
- IE下，可以给script标签加defer来处理
偶这个是从mootools，prototype中抠出来的IE，Firefox下测试通过 
- Event.addDOMReadyEvent = function($callback) {
- var timer, fired = false;
- function fireDOMReadyEvent() {
- if (fired) {
- return;
- }
- if (timer) {
- window.clearInterval(timer);
- }
- fired = true;
- $callback();
- }
- // firefox, opera, safari ...
- if (document.addEventListener) {
- if (window.webkit) {
- timer = window.setInterval(function() {
- if (/loaded|complete/.test(document.readyState)) {
- fireDOMReadyEvent();
- }
- }, 10);
- Event.addEvent(window, 'load', fireDOMReadyEvent);
- } else {
- // firefox, opera9 使用 DOMContentLoaded
- document.addEventListener("DOMContentLoaded", fireDOMReadyEvent, false);
- }
- } else {
- // Internet Explorer中使用 defer 属性
- var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';
- document.write('<SCRIPT id=__tbOnDOMReady src="' + src + '" defer><\/script>');
- $('__tbOnDOMReady').onreadystatechange = function() {
- if (this.readyState == 'complete') {
- this.onreadystatechange = null;
- fireDOMReadyEvent();
- }
- };
- }
- }
本文相关评论|Comments
这篇日志的代码片段是不能正常运行的，只是写出了各浏览器下实现DOMReady的关键代码，如果要实例，请看http://www.ajaxeye.com/labs/domready.htm
JS代码可以直接另存