Javascript onload() 和 $.ready 的区别?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4395780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 12:14:07  来源:igfitidea点击:

Difference between onload() and $.ready?

javascriptjqueryonload

提问by Venkat

Can you list the difference between onload()and $(document).ready(function(){..})functions in the using jQuery?

你能列出使用 jQuery 中onload()$(document).ready(function(){..})函数之间的区别吗?

回答by Lee

the loadevent (a.k.a "onload") on the window and/or body element will fire once allthe content of the page has been loaded -- this includes all images, scripts, etc... everything.

load一旦加载了页面的所有内容,窗口和/或正文元素上的事件(又名“onload”)将触发——这包括所有图像、脚本等......一切。

In contrast, jquery's $(document).ready(...)function will use a browser-specific mechanism to ensure that your handler is called as soon as possible after the HTML/XML dom is loaded and accessible. This is the earliest point in the page load process where you can safely run script that intends to access elements in the page's html dom. This point arrives earlier (often much earlier) than the final loadevent, because of the additional time required to load secondary resources (like images, and such).

相比之下,jquery 的$(document).ready(...)函数将使用特定于浏览器的机制来确保在加载并访问 HTML/XML dom 后尽快调用您的处理程序。这是页面加载过程中的最早点,您可以安全地运行脚本来访问页面的 html dom 中的元素。load由于加载次要资源(如图像等)需要额外的时间,因此这一点比最终事件更早(通常更早)到达。

回答by Bhanu Prakash Pandey

The main differences between the two are:

两者之间的主要区别是:

  1. Body.Onload() event will be called only after the DOM and associated resources like images got loaded, but jQuery's document.ready() event will be called once the DOM is loaded i.e., it wont wait for the resources like images to get loaded. Hence, the functions in jQuery's ready event will get executed once the HTML structure is loaded without waiting for the resources.
  2. We can have multiple document.ready() in a page but Body.Onload() event cannot.
  1. Body.Onload() 事件只有在 DOM 和图像等相关资源加载后才会被调用,但 jQuery 的 document.ready() 事件将在 DOM 加载后调用,即它不会等待图像等资源被加载. 因此,一旦加载了 HTML 结构,jQuery 的 ready 事件中的函数就会执行,而无需等待资源。
  2. 我们可以在一个页面中有多个 document.ready() 但 Body.Onload() 事件不能。

回答by user5755278

Document.ready() function triggers as soon as HTML DOM loaded. But the onload() function will trigger after HTML DOM, all the body content like images loaded.

Document.ready() 函数在 HTML DOM 加载后立即触发。但是 onload() 函数将在 HTML DOM 之后触发,所有正文内容如图像加载。

回答by sridiva

body.onload() cares about both HTML structure and assoicated resources where as document.ready() cares only about the HTML structure.

body.onload() 关心 HTML 结构和相关资源,而 document.ready() 只关心 HTML 结构。

回答by Daniele Petrarolo

Onload take care about DOM and resources: it checks if images are loaded, script are ready to run and much more.

Onload 负责 DOM 和资源:它检查图像是否已加载、脚本是否已准备好运行等等。

$.ready simply check if we have read the full DOM of the page.

$.ready 只是检查我们是否已经阅读了页面的完整 DOM。

Please check out this link for more explain and example: http://dailygit.com/difference-between-document-ready-and-window-load-in-jquery/

请查看此链接以获取更多解释和示例:http: //dailygit.com/difference-between-document-ready-and-window-load-in-jquery/

回答by Srikrushna

onload()fires when all the content (everything) on the targeted eleement is fully loaded like CSS, images etc.

$.readyindicates that code in it need to be executed once the targeted elements content loaded and ready to be manipulated by script. It won't wait for the images to load for executing the jQuery script.

onload()在目标元素上的所有内容(所有内容)完全加载时触发,如 CSS、图像等。

$.ready表示一旦目标元素内容加载并准备好由脚本操作,就需要执行其中的代码。它不会等待图像加载来执行 jQuery 脚本。

.

Ex(body onload):

例如(身体加载):

<body onload="loadBody()">

<script>
function myFunction() {
    alert("Page is loaded");
}
</script>
</body

Ex(onload on an element):

Ex(在元素上加载):

<img src="w3html.gif" onload="loadImg()" width="100" height="132">

<script>
function loadImg() {
    alert("Image is loaded");
}
</script>

Ex3 ($.ready):

Ex3 ($.ready):

<script type = "text/javascript">
        $(document).ready(function() {
            alert("$(document).ready fired");
        });
    </script>