document.ready()

時間 2019-11-26

標籤 document.ready document ready 简体版

原文原文鏈接

document.ready()和傳統的方法<body onload=」load()」> 類似，不一樣的是onload()的方法是在頁面加載完成後才發生，這包括DOM元素和其餘頁面元素（例如圖片）的加載，所以，使用document.ready()方法的執行速度比onload()的方法要快。php

document.ready()能夠說是jQuery的一大特點，它不只比傳統的Javascript函數onload()要快，並且加上jQuery強大的選擇器能夠在不用修改HTML代碼狀況下(例如：不用在HTML標籤加入onClick()函數來調用其它自定義Javascript函數)對Web頁面中的各類元素和事件進行控制、實現和Web客戶交互的做用。html

但是有時document.ready()並不是你想像的那麼快，我在最近的一個project裏就碰到這個問題。例如一個頁面含有多個類似的連接，每個連接的HTML代碼大體以下：jquery

<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代碼以下：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>前。this

Updated:(3/24/08)url

經測試，第三種方法也很差用，主要問題是在頁面沒有徹底加載完畢時，連接就已經被點擊，這時</body>前的那一段jQuery代碼尚未被加載，所以連接尚未被綁定ajax事件控制。spa

最終的解決辦法是，把上面那段jQuery代碼寫出一個函數，反正header裏，而後結合傳統Javascript onClick函數，在連接被點擊時直接調用header裏函數。具體更改以下：firefox

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事件控制，而不在頁面加載後綁定事件控制。這樣就能夠避免連接被點擊時，事件尚未綁定的問題。

相關標籤/搜索

document.ready

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。