Introduction and usage of JQueryonload and ready _ jquery

Source: Internet
Author: User
There are two types of page loading events. One is ready, which indicates that the document structure has been loaded. the onload and ready concepts are easy to confuse. The following describes two types of page loading events in detail, the first is ready, which indicates that the file structure has been loaded (excluding non-text media files such as images), and the second is onload, which indicates that all elements including images and other files on the page are loaded. (You can say: ready loads before onload !!!)
Generally, the style is controlled, and the slice size is controlled to be loaded in onload;

The jS event trigger method can be loaded in ready;
Many people who use jQ write scripts like this:
General statement

The Code is as follows:


$ (Function (){
// Do something
});


In fact, this is short for jq ready (), which is equivalent:

The Code is as follows:


$ (Document). ready (function (){
// Do something
})


It is also equal to the following method. The default parameter of jQuer is "document ";

The Code is as follows:


$ (). Ready (function (){
// Do something
})


$ (Document). Ready () method VS OnLoad event VS $ (window). load () method
The first thing we learned when to get started with JQuery is when to start the event. For a long time, the events triggered after page loading were all loaded into the Onload event of the "Body.
The Onload event of the Body has many drawbacks compared with the Ready method of JQuery. For example:
How to load Multiple Functions


The Onload event can only be loaded in this way, which is ugly...
■ In JQuery, you can use multiple JQuery. Ready () Methods to execute them in sequence.
Code and content are not separated
This does not seem to have to be said, and it is so annoying -.-!! The sequence of pipeline execution is different.
■ For Body. the Onload event is triggered after all the page content is loaded. I mean all the content, including images and flash. if there is a lot of such content on the page, the user will wait for a long time.
■ For the $ (document). ready () method, this method is triggered only after all the DOM of the page is loaded, which undoubtedly greatly speeds up the webpage.

However, for some special applications, the image can be scaled in or out, and the image can be cropped. What happens after all the content on the webpage is loaded? We recommend that you use the $ (window). load () method. This method will not be triggered until all the content on the page is loaded, and there is no OnLoad event.

The Code is as follows:


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.