$（window）.load和$（document）.ready？有什麼區別？

我最近一直有一個問題，我的JavaScript代碼，並採取我的代碼的一部分了我$(document).ready()，並把它內$(window).load()解決了這一問題。

現在我明白了window.load只是document.ready後被解僱，但爲什麼document.ready後是不是準備好了，是window.load()後？

來源

2011-03-03 Mark McCook

你可以閱讀文檔：http：//api.jquery.com/ready/ – epascarello 2011-03-03 14:33:02

我寫了一篇小文章，其中包含一個很好的參考資料來說明這一點：http://amrelgarhy.com/blog/how-to -lll-when-images-have-loaded/ – 2011-03-03 14:33:54

load當所有資產被加載完成，包括圖片被調用。當DOM準備好進行交互時，會觸發ready。

從MDC，window.onload：

在文件加載過程結束

負載事件觸發。在這一點，所有文檔中的對象都在DOM，和所有的圖像和子幀已經完成加載。

從jQuery的API文檔，.ready(handler)：

雖然JavaScript提供負載事件執行代碼，當頁面呈現，這個事件沒有得到觸發，直到所有的資產，因爲圖像已完全收到。在大多數情況下，該腳本可以儘快的DOM層次已經完全構造運行。該處理程序通過到.ready（）保證爲在DOM準備好後執行，所以這通常是附加所有其他事件處理程序和運行其他jQuery代碼的最佳位置。在使用依賴於CSS 樣式屬性的值的腳本時，引用外部樣式表或嵌入樣式元素對引用腳本之前非常重要。

來源

2011-03-03 14:30:34

「在引用腳本之前引用外部樣式表或嵌入樣式元素很重要」。這與jQuery.ready（）使用的DOMContentLoaded定義形成了鮮明對比：「DOMContentLoaded事件在初始HTML文檔被完全加載和解析時觸發，無需等待樣式表，圖像和子幀完成加載。」在異步環境中「之前」是一個棘手的詞。有沒有辦法保證樣式表在.ready（）之前被加載？把「鏈接」標籤放在「頭」是否保證了這一點？ – spekary 2018-02-16 18:21:45

$(document).ready()意味着您的頁面的DOM已準備好進行操作。

window.load()是當整個頁面（包括像CSS和圖像文件的組件）完全加載觸發。

你想達到什麼目的？

來源

2011-03-03 14:31:30

我試圖操作圖像，但是當我在文檔上做了這些準備工作時，我得到了錯誤，但後來我看到一個代碼片段正在做類似於我想要的內容，但代碼中唯一的區別是它們使用了$（window）。加載和我使用$（document）.ready（） – 2011-03-03 14:47:05

是使用$（window）.load是正確的選擇。它檢測您的圖像是否成功加載。只需要$（文檔）.ready下的$（window）.load即可。所以它會像這樣$（document）.ready（$（window）.load（）{}） – 2016-04-26 04:31:42

$(document).ready(function(){ 
//code here 
});

上面的代碼幾乎每次在使用jQuery時都會使用。

當我們要初始化我們jQuery代碼中的DOM準備好該代碼使用。

$(window).load()

有時候你想操縱圖片。例如，您想垂直和水平對齊圖片，並且需要獲取圖片的寬度和高度才能實現此目的。使用$(document).ready()如果訪問者沒有加載圖像，則無法執行此操作，此時需要在圖像加載完成後初始化對齊函數jquery。這就是我們使用的地方$(window).load()

來源

2011-03-03 14:32:24 SimonGates

$(document).ready是jQuery當DOM被加載時觸發的事件，因此當文檔結構準備就緒時會觸發它。

$(window).load在加載完整內容（包括css，圖像等）後觸發事件。

這是主要的區別。

來源

2013-04-05 05:52:49

$(document).ready()是<body>...</body>

$(window).load()包裹DOM是文檔的爸爸包裝所有DOM中<html>...</html>

讓我們在你的情況下使用，以節省渲染處理。

來源

2015-01-16 03:45:22 xicooc

加載狀態是窗口對象創建時的狀態，包括DOM在內的所有必要組件都已加載到內存中，但尚未傳遞到呈現引擎以在頁面中呈現相同內容。

另一方面，就緒狀態確保DOM元素，事件和其他相關組件被傳遞到呈現引擎，呈現在頁面上，並且可以進行交互和操作。

來源

2016-07-25 13:07:15 asmitB

簡而言之，當加載窗口的所有內容時調用window.load，而在加載DOM並且文檔結構已準備好時調用document.ready。

來源

2017-01-17 09:11:29

$（document）.ready比較滑動快速$（window）.load Event。
$（文檔）.ready在Dom加載時觸發，但$（window）.load事件在Dom，css和圖像完全加載時觸發。

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title></title> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js" ></script> 
 
    <script> 
 
     $(window).load(function() {   
 
      var img = $('#img1'); 
 
     alert("Image Height = " + img.height() + "<br>Image Width = " + img.width());   
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <form id="form1" runat="server">  
 
    <div> 
 
     <img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" /> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

來源

2017-10-08 15:24:44

-1

$(document).ready是一個jQuery事件。只要DOM被加載並準備好被腳本操作，它就會啓動。這是頁面加載過程中最早的一點，腳本可以安全地訪問頁面的html DOM中的元素。在所有圖像，css等完全加載之前，此事件被觸發。

window.load()是當整個頁面（包括像CSS和圖像文件的組件）完全加載觸發。

來源

2017-12-22 06:19:58

$（window）.load和$（document）.ready？有什麼區別？

回答

相關問題