窗口。Onload vs $(document).ready()

JavaScript的窗口之间有什么区别。onload和jQuery的$(document).ready()方法?

当前回答

$(document).ready()是一个jQuery事件。JQuery的$(document).ready()方法在DOM准备就绪时立即被调用(这意味着浏览器已经解析了HTML并构建了DOM树)。这允许您在文档准备好操作时立即运行代码。

例如，如果一个浏览器支持DOMContentLoaded事件(许多非ie浏览器都支持)，那么它将在该事件上触发。(请注意DOMContentLoaded事件仅在IE9+中添加到IE。)

可以使用两种语法:

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

或者简写一下:

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

$(document).ready()的要点:

它不会等待图像被加载。用于在完全加载DOM时执行JavaScript。把事件处理程序放在这里。可多次使用。当收到“$ is not defined”时，将$替换为jQuery。如果您想操作图像，则不使用。请使用$(window).load()代替。

window.onload()是一个原生JavaScript函数。当页面上的所有内容(包括DOM(文档对象模型)、横幅广告和图像)都已加载时，window.onload()事件将触发。两者之间的另一个区别是，虽然我们可以有多个$(document).ready()函数，但我们只能有一个onload函数。

2013-08-20 16:00:15

其他回答

窗口。onload:普通的JavaScript事件。

文档。ready:整个HTML加载完成时的特定jQuery事件。

2013-06-02 10:38:36

有一件事要记住(或者我应该说要记住)，你不能像准备好了一样叠在一起。换句话说，jQuery神奇地允许在同一个页面上有多个readys，但是onload不能做到这一点。

最后一个onload将否决之前的任何onload。

处理这个问题的一个好方法是使用一个显然由Simon Willison编写的函数，并在使用多个JavaScript Onload函数中进行了描述。

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

2013-11-07 20:54:48

当页面上的所有内容(包括DOM(文档对象模型)内容和异步JavaScript、框架和图像)完全加载时，Windows加载事件将触发。你也可以使用body onload=。两者都是一样的;窗口。Onload = function(){} and <body Onload ="func();>是使用同一事件的不同方式。

jQuery文档。就绪函数事件执行的时间比窗口稍早。onload，在页面上加载DOM(文档对象模型)时调用。它不会等待图像、帧完全加载。

摘自以下文章: $document.ready()与window.onload()的区别

2013-09-17 07:09:09

该文档。ready事件发生时，HTML文档已加载，窗口。Onload事件总是稍后发生，当所有内容(图像等)都已加载。

你可以使用文档。Ready事件，如果你想在渲染过程中“早期”介入，而不等待图像加载。如果你需要图像(或任何其他“内容”)在你的脚本“做一些事情”之前准备好，你需要等到window.onload。

例如，如果您正在实现“幻灯片显示”模式，并且需要根据图像大小执行计算，则可能希望等到window.onload。否则，您可能会遇到一些随机问题，这取决于图像加载的速度。您的脚本将与加载图像的线程同时运行。如果脚本足够长，或者服务器足够快，如果图像恰好及时到达，您可能不会注意到问题。但是最安全的做法是允许图像被加载。

文档。Ready可以是一个很好的事件，让你向用户显示一些“loading…”标志，并在窗口上显示。onload，你可以完成任何需要加载资源的脚本，然后最后删除“Loading…”标志。

例子:-

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

2016-05-16 10:37:07

当你说$(document).ready(f)时，你告诉脚本引擎做以下事情:

获取对象文档并推送它，因为它不在本地范围内，它必须执行哈希表查找来查找文档的位置，幸运的是，文档是全局绑定的，所以这是一个单一的查找。找到对象$并选择它，因为它不在本地范围内，它必须进行哈希表查找，这可能有冲突，也可能没有冲突。在全局作用域中找到对象f，这是另一个哈希表查找，或者push函数对象并初始化它。调用所选对象的ready，这涉及到对所选对象的另一个哈希表查找，以找到方法并调用它。完成了。

在最好的情况下，这是2次哈希表查找，但这忽略了jQuery所做的繁重工作，其中$是jQuery所有可能输入的厨子，因此可能有另一个映射将查询分派给正确的处理程序。

或者，你可以这样做:

window.onload = function() {...}

这将

在全局范围内找到对象窗口，如果JavaScript是优化的，它会知道因为窗口没有改变，它已经有了选择的对象，所以什么都不需要做。函数对象被压入操作数堆栈。通过查找哈希表来检查onload是否是一个属性，因为它是，所以它像函数一样被调用。

在最好的情况下，这只需要查找一次哈希表，这是必要的，因为必须获取onload。

理想情况下，jQuery会将它们的查询编译为字符串，这些字符串可以被粘贴来做你想要jQuery做的事情，但没有jQuery的运行时分派。通过这种方式，您可以任选其一

像我们今天做的那样动态分派jquery。让jQuery编译你的查询纯JavaScript字符串，可以传递给eval做你想要的。将2的结果直接复制到代码中，并跳过eval的代价。

2017-11-30 17:28:21

窗口。Onload vs $(document).ready()

推荐文章

最新文章

标签