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 */
});