船长 发表于 2009-03-05 10:04 | 分类：jQuery | 阅读数：2,232 次
看书时大家都说jquery的onload($().ready(..))先于window.onload执行。于是做了个实验。
比如在加载图片时，这里通过一个handler来模仿，而这个handler基本上不做什么事情，仅仅是简单的sleep几秒钟。
结果：window.onload要等图片加载完成之后再执行，而().ready(..)则不需要。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryLoadVSOnLoad.aspx.cs" Inherits="JQueryLoadVSOnLoad" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="JQuery/jquery-1.2.3.pack.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="~/Handler.ashx" runat="server"/>
</div>
</form>
</body>
<script type="text/javascript">
window.onload=function()
{
alert("load!");
}
$(document).ready(
function()
{
alert("jquery load!");
}
);
</script>
</html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.IO;
public class Handler : IHttpHandler
{
public void ProcessRequest (HttpContext context)
{
System.Threading.Thread.Sleep(5000);
}
public bool IsReusable
{
get
{
return false;
}
}
} |
【小结】在$(document).ready()执行时，整个DOM文档树已经解析完成，即各个DOM元素都已经可以访问了（但是对于某些元素的某些属性此时访问可能还不精确，如图片的宽度高度）
而window.onload会在整个文档都加载完成后才会执行，常见的就是对于页面含很多图片的情况下，必须等到图片都下载下来后才会执行。而$(document).ready()不会。
