Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "what is the difference between onload and ready in JavaScript". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "what is the difference between onload and ready in JavaScript" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.

1. time for performance

_window.onload( ) must wait until all elements of the page, including images, have been loaded.

$(document).ready( ) is executed after the DOM structure is drawn, there is no need to wait until the end of loading. That is,$(document).ready( ) is executed before_window.onload( ).

2. Different number of compilations

_window.onload( ) cannot be written more than once, if there are more than one_window.onload( ) method, only one will be fulfilled

$(document).ready( ) can be written multiple times at the same time, and all can be fulfilled

3. simplified writing

_window.onload( ) is not simplified

$(document).ready(function( ){ }) can be abbreviated to $(function( ){ });

In regular JavaScript code, the_window.onload( ) method is usually used, whereas in jQuery, the $(document).ready( ) method is used.

The $(document).ready( ) method and the_window.onload( ) method have similar functionality, but differ in timing._ window.onload( ) method is performed after all elements in the page (including the element's associated files) are fully loaded into the reader, that is, JavaScript can access any element in the page at this time. Event handlers registered via the $(document).ready() method in jQuery can be invoked when the DOM is fully ready. At this point, all elements of the web page are accessible to jQuery, but this does not mean that the files associated with these elements have been downloaded.

Example: The load( ) method binds a handler to the onload event of the element. If the handler is bound to a window object, it will trigger when all content (including windows, frames, objects, images, etc.) is loaded. If the handler is bound to an element, it will trigger when the content of the element is loaded.

The most common example is some image sites, sometimes you will see some sites where all images have a placeholder, before the page loads the image has occupied a certain space, and then each individual load, this kind of situation is using the $(document).ready( ) method. Some web pages are to wait until all the images are loaded before displaying the web page, when the network speed is not good when a page needs to wait a long time to display, this is the use of the_window.onload( ) method. Obviously, parsing a web page into a DOM tree is much faster than loading all the associated files in the web page.

Note also that since the event registered in the $(document).ready() method will be fulfilled as soon as the DOM is ready, it is possible that the element's associated files have not been downloaded yet. For example, HTML related to images is downloaded and parsed into DOM trees, but it is likely that images are not loaded yet, so attributes such as image height and width may not be valid at this time. To solve this problem, you can use another JQuery method for page loading-- load(). The load() method binds a handler to the onload event of the element. If the handler is bound to a window object, it will trigger when all content (including windows, frames, objects, images, etc.) is loaded. If the handler is bound to an element, it will trigger when the content of the element is loaded.

Read here, this article "What is the difference between onload and ready in JavaScript" article has been introduced, want to master the knowledge points of this article also need to be used by yourself to understand, if you want to know more about the content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.