document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。
document.ready()可以说是jQuery的一大特色，它不仅比传统的Javascript函数onload()要快，而且加上jQuery强大的选择器可以在不用修改HTML代码情况下(例如：不用在HTML标签加入onClick()函数来调用其它自定义Javascript函数)对Web页面中的各种元素和事件进行控制、实现和Web客户交互的作用。
可是有时document.ready()并非你想像的那么快，我在最近的一个project里就碰到这个问题。例如一个页面含有多个相似的链接，每一个链接的HTML代码大致如下：
<a rel="popin" href="/cart/?popin=yes&act=add&sku=xxx">
<img src="/images/new/buynow.gif" border="0" />
</a>
当这些链接被点击后，相对应的物品(sku)就会被加入购物篮，为让客户点击链接后不用离开当前页面，我使用了jQuery的ajax方法，从后台调用添加购物篮函数，然后返回xml响应，最后把xml携带的信息通过HTML层(layer)传递给客户。大致的jQuery+ajax代码如下：
$(document).ready(function(){
$("a[rel^='popin']").click(function(){
$.ajax({
url: $(this).attr('href'),
type: 'GET',
dataType: 'xml',
error: function(){
alert('Error loading XML document');
},
success: function(xml){
$('#cart_sum1').html($(xml).find('cart').text());
$('#buynow-result').html($(xml).find('pop').text());
$('#buynow-inform').show('slow');
$('#cart_sum2').html($(xml).find('cart').text());
}
});
return false;
});
});
注意到我用了document.ready，试图在DOM ready的时候给这些链接(<a[rel^='popin'>)绑定点击事件控制。这在我的机子(windowxp+firefox3)里测试通过，但是在我老板的机子(redhat+firefox)上，有时会出现点击链接后跳出XML代码，原因很明显: 当她点击链接的时候，链接还没有被绑定事件控制，也就是说document.reday()还是不够快。
怎么解决？我有打算在链接代码里加入传统Javscript的onClick函数，这样当客户点击链接的时候，先调用onClick函数，然后在onClick函数里在调用ajax，应该就可以解决问题。今天想看看别人都是怎么解决这个问题，就用Google搜索了一下。找到这篇论坛问答，觉得说的挺有道理：
Using window.onload waits until the whole page is loaded. (onload是在页面加载后起作用)
Using document.ready waits until the whole DOM is ready (document.ready是在DOM 准备好后起作用)
Having the script at the end of the body without document.ready, that doesn't wait. (把去掉document.ready的jQuery代码放在</body>前，无需等待)
准备明天到公司试试这种方法。其实把Javascript放在</body>前的说法以前也有看到过，Google的Analytics代码就建议放在</body>前。
Updated:(3/24/08)
经测试，第三种方法也不好用，主要问题是在页面没有完全加载完毕时，链接就已经被点击，这时</body>前的那一段jQuery代码还没有被加载，因此链接还没有被绑定ajax事件控制。
最终的解决办法是，把上面那段jQuery代码写出一个函数，反正header里，然后结合传统Javascript onClick函数，在链接被点击时直接调用header里函数。具体更改如下：
1. jQuery函数 (这段函数被放在header里)
function ajax_add(url_str){//把jquery代码写成一个函数
$.ajax({
url: url_str,
type: 'GET',
dataType: 'xml',
//timeout: 5000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
$('#cart_sum1').html($(xml).find('cart').text());
$('#buynow-result').html($(xml).find('pop').text());
$('#buynow-inform').show('slow');
$('#cart_sum2').html($(xml).find('cart').text());
}
});
}
2. 链接代码：
<a onClick="add_ajax('/cart/?popin=yes&act=add&sku=xxx')" href="#">
<img src="/images/new/buynow.gif" border="0" />
</a>
注意：链接直接加入onClick事件控制，而不在页面加载后绑定事件控制。这样就可以避免链接被点击时，事件还没有绑定的问题。
分享到：
相关推荐
总结来说，`jQuery(document).ready()`提供了一种灵活且高效的处理DOM就绪的方式，而`window.onload()`和`body.onload`更适用于需要等待整个页面加载的场景。理解这些不同方法的用法和区别，可以帮助开发者更有效地...
document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度...
document.writeln ('<dd>08月05日 网页背景和小图片添加打包下载</dd>'); document.writeln ('<dd>07月12日 修复搜索、导航和返回顶部BUG</dd>'); document.writeln ('<dd>06月26日 改进网页背景频道预览功能</dd>')...
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset=utf-8> <...document.getElementById...<div id=panel>click me.</div> </body> </html>
JQuery onload、ready 方法详细解说 在 JavaScript 库中，JQuery 提供了两种事件处理机制，即 onload 和 ready。它们都是在页面加载完成后触发的事件，但是它们之间有着一定的区别。 首先，我们需要了解这两种事件...
<body onload="onLoad()"> <p id="deviceProperties">Loading device properties</p> </body> </html> ``` 四、Android和iPhone的特定行为 - 在Android设备上，device.name返回的是产品代码名，而不是常见的型号...
document.getElementById("mypic").innerHTML = "<img src='" + this.src + "' />"; }; </script> <div id="mypic">onloading……</div> ``` 方法二： 与方法一类似，但使用`onreadystatechange`事件，当图片的`...
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...
通过以上介绍，我们可以看到实现`<iframe>`自适应高度的方法多种多样，可以根据项目需求和个人偏好选择合适的方法。无论是简单的纯HTML + CSS方式还是利用JavaScript或第三方库，都能有效解决`<iframe>`高度固定的...
<body onload="onLoad()"> <h1>Example</h1> <p>getCurrentHeading & watchHeading</p> </body> </html> ``` 这段代码展示了如何使用`getCurrentHeading`和`watchHeading`方法，并且在页面加载完成后执行。通过...
总的来说，$(document).Ready()、OnLoad事件和$(window).load()都是确保代码在适当时间执行的方法，各有优缺点。理解它们之间的区别和适用场景，能帮助开发者编写出更加高效、流畅的前端代码。在实际项目中，根据...
但是，如果在同一个页面中使用了window.onload或<body onload="...">，那么ready事件就不会被触发。 从兼容性、安全性和实用性等角度来看，jQuery推荐使用$(document).ready(fn)，因为它比window.onload有更好的...
总结来说，jQuery 的 ready() 函数和 window 的 load 事件在页面加载过程中有着明确的分工和不同的触发时机： 1. ready() 函数实现的是 DOMContentLoaded 事件，它在 DOM 结构完全加载后立即触发，而不等待其他资源...
<body onload="onLoad()"> <h1>Example</h1> <p>getCurrentAcceleration</p> </body> </html> ``` 总结，PhoneGap提供的`Accelerometer` API 使得开发者能够轻松地访问和利用设备的加速度数据，这对于开发与运动...
var iframeHeight = this.contentWindow.document.body.scrollHeight; iframe.css('height', iframeHeight + 'px'); }); }); ``` 这段代码会在`iframe`加载完成后获取其内容的`scrollHeight`，这个属性包含了...
<body onload="load()"> <script type="text/javascript"> function load() { document.getElementById('ele').innerHTML='welcometomyblog'; } </script> ``` 除了这些传统方法之外，现代的前端开发中常用jQuery...