Home >Web Front-end >JS Tutorial >jQuery ready function abuse analysis_jquery

jQuery ready function abuse analysis_jquery

WBOYOriginal: 2016-05-16 18:10:32987browse

Check out the code you wrote before. There are many codes like this:

Copy code The code is as follows:

 
$(function(){ 
//do something. 
}); 

You may write some initialization styles, attach event processing to other DOM elements, etc. No problem was found at first, but when the page referenced some slow-downloading images, a problem arose: between the time the page HTML was downloaded and all resources were downloaded, the events bound to the DOM element could not be executed. Chaotic situations such as invalid styles bound by scripts, that is, whether ready is executed.

Ok, my situation is quite special. Maybe this situation is impossible for most students to encounter, but during development we have to consider that in some worse situation, a user opens Your website, and then you happen to have a lot of images on your page. . . Then he can only wait. . .

Solution: Return to basics
Before ready appeared, our writing method might be like this:

Insert a script block in the document

Copy code The code is as follows:

hello world

Such code is loaded here in the browser will be executed. Note that if the DOM element test1 here is after the script block, an exception will occur here.

I just need to execute these codes when the page is loaded. I don’t need all the resources of the page to be loaded, so there is no need for me to sit here and wait for the "slow" ready.

Well, think about it and sort out the html structure.
It’s not good to have script blocks everywhere on the page, which is not conducive to reading. So just sort them out and drag them to the end of the document.

Copy code The code is as follows:

//Let’s put some fancy stuff like title, meta, link, etc. here.

Body html…….