<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>岁月如歌 &#187; onload</title>
	<atom:link href="http://lifesinger.org/blog/tag/onload/feed/" rel="self" type="application/rss+xml" />
	<link>http://lifesinger.org/blog</link>
	<description>关注用户体验、前端开发，记录生活点滴、岁月足迹。</description>
	<lastBuildDate>Mon, 06 Sep 2010 15:05:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>onload 和 DOMContentLoaded 的陷阱</title>
		<link>http://lifesinger.org/blog/2009/07/onload-and-domcontentloaded/</link>
		<comments>http://lifesinger.org/blog/2009/07/onload-and-domcontentloaded/#comments</comments>
		<pubDate>Fri, 03 Jul 2009 08:33:35 +0000</pubDate>
		<dc:creator>lifesinger</dc:creator>
				<category><![CDATA[开发]]></category>
		<category><![CDATA[DOMContentLoaded]]></category>
		<category><![CDATA[onload]]></category>
		<category><![CDATA[setTimeout]]></category>

		<guid isPermaLink="false">http://lifesinger.org/blog/?p=1922</guid>
		<description><![CDATA[在正常情况下： window.onload 事件在所有页面元素（包括图片，脚本等）都下载完毕后才会触发。 除了 IE，其它浏览器支持 DOMContentLoaded 事件。当 DOM 内容下载完毕，就会立刻触发。 事件处理器必须在事件触发前注册才有效，否则不会被执行。例子：在 window 已经 load 完成后，再给 window.onload 注册的处理器不会被执行。 针对 IE，有各种模拟 DOMContentLoaded 事件的办法。目前被广泛采纳的方案是判断 document 是否可以滚动（doScroll）。一旦可以滚动，就意味着 DOM Content 已经加载完毕。 下面说两个陷阱： 在 setTimeout 里给 window.onload 添加处理器。这是不可靠的，无法保证添加的处理器一定会执行。是否执行取决于 setTimeout 的延时和页面内容的加载时间。比如： // Test 1. 在 onload 后添加 onload handler setTimeout(function() { onLoad(function() { alert('Test 1: window loaded.'); // 不一定执行 }); }, 20); 在动态加载的 [...]]]></description>
			<content:encoded><![CDATA[<p>在正常情况下：</p>
<ol>
<li>window.onload 事件在所有页面元素（包括图片，脚本等）都下载完毕后才会触发。</li>
<li>除了 IE，其它浏览器支持 DOMContentLoaded 事件。当 DOM 内容下载完毕，就会立刻触发。</li>
<li>事件处理器必须在事件触发前注册才有效，否则不会被执行。例子：在 window 已经 load 完成后，再给 window.onload 注册的处理器不会被执行。</li>
<li>针对 IE，有各种模拟 DOMContentLoaded 事件的办法。目前被广泛采纳的方案是判断 document 是否可以滚动（doScroll）。一旦可以滚动，就意味着 DOM Content 已经加载完毕。</li>
</ol>
<p>下面说两个陷阱<span id="more-1922"></span>：</p>
<ol>
<li>在 setTimeout 里给 window.onload 添加处理器。这是不可靠的，无法保证添加的处理器一定会执行。是否执行取决于 setTimeout 的延时和页面内容的加载时间。比如：
<pre>
// Test 1. 在 onload 后添加 onload handler
setTimeout(function() {
    onLoad(function() {
        alert('Test 1: window loaded.'); // 不一定执行
    });
}, 20);
</pre>
</li>
<li>在动态加载的 script 的 onload 事件里，给 window.DOMContentLoaded 添加处理器。这更不可靠，除了 IE，其它浏览器下根本不会执行。比如：
<pre>
// Test 2. 测试动态添加 script
getScript('http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js', function() {
   alert('Test 2: jQuery loaded.');
    onReady(function() { alert('Test 2: content loaded.'); }); // 不可靠
});
</pre>
</li>
</ol>
<p>测试页面：<a href="http://lifesinger.org/lab/2009/load_test.html">load_test.html</a></p>
<p>最后提一点：从上面的测试页面中可以看出，IE 下模拟 DOMContentLoaded 事件仅仅是模拟，和其它浏览器依旧存在本质上的差异。在 IE 真正原生支持 DOMContentLoaded 前，疯狂使用<code>$(document).ready(...), YAHOO.util.Event.onDOMReady(...)</code>等方法时，依旧需要谨慎，要留意陷阱。</p>
]]></content:encoded>
			<wfw:commentRss>http://lifesinger.org/blog/2009/07/onload-and-domcontentloaded/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>
