window.onload與$（document）.ready（）

時間 2019-12-18

標籤 window.onload window onload document ready 欄目 JavaScript 简体版

原文原文鏈接

JavaScript的window.onload和jQuery的$(document).ready()方法有什麼區別？ javascript

#1樓

關於在Internet Explorer中使用$(document).ready()的警告。若是在整個文檔加載以前 HTTP請求被中斷（例如，當頁面流向瀏覽器時，單擊了另外一個連接），IE將觸發$(document).ready事件。 php

若是$(document).ready()事件中的任何代碼都引用DOM對象，則可能找不到這些對象，而且會發生Javascript錯誤。保護您對這些對象的引用，或者推遲將這些對象引用到window.load事件的代碼。 html

我沒法在其餘瀏覽器（特別是Chrome和Firefox）中重現此問題 java

#2樓

window.onload： 一個正常的JavaScript事件。 jquery

document.ready： 加載整個HTML時的特定jQuery事件。 api

#3樓

$(document).ready()是一個jQuery事件。 DOM準備就緒時，將當即調用JQuery的$(document).ready()方法（這意味着瀏覽器已解析HTML並構建了DOM樹）。這使您能夠在準備好操做文檔後當即運行代碼。瀏覽器

例如，若是瀏覽器支持DOMContentLoaded事件（就像許多非IE瀏覽器同樣），則它將在該事件上觸發。（請注意，DOMContentLoaded事件僅添加到IE9 +中的IE。）框架

可使用兩種語法：異步

$( document ).ready(function() {
   console.log( "ready!" );
});

或速記版本：函數

$(function() {
   console.log( "ready!" );
});

$(document).ready()要點：

它不會等待圖像加載。
DOM徹底加載後用於執行JavaScript。將事件處理程序放在這裏。
能夠屢次使用。
當您收到「未定義$」時，用jQuery替換$ 。
若是要操做圖像，則不使用。使用$(window).load()代替。

window.onload()是本機JavaScript函數。加載頁面上的全部內容（包括DOM（文檔對象模型），橫幅廣告和圖像）時，將觸發window.onload()事件。二者之間的另外一個區別是，儘管咱們能夠有多個$(document).ready()函數，但咱們只能有一個onload函數。

#4樓

當頁面上的全部內容（包括DOM（文檔對象模型）內容以及異步JavaScript ， 框架和圖像 ）徹底加載時，將觸發Windows加載事件。您也可使用body onload =。二者是相同的； window.onload = function(){}和<body onload="func();">是使用同一事件的不一樣方法。

jQuery $document.ready函數事件的執行要比window.onload早一些，而且一旦將DOM（Document object model）加載到頁面上便被調用。它不會等待圖像和框架徹底加載 。

摘自如下文章： $document.ready()與window.onload()有何不一樣

#5樓

要記住的一件事（或者我應該說回想）是，您不能像使用ready那樣堆疊onload 。換句話說，jQuery magic在同一頁面上容許多個ready ，可是您不能使用onload作到這一點。

最後的onload將推翻全部先前的onload 。

解決這個問題的一種好方法是使用一個顯然由一個Simon Willison編寫的函數，該函數在Using Multiple JavaScript Onload Functions中進行了描述。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});

相關標籤/搜索

window.onload

ready

document

indexwriter+document+field

每日一句

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