Parse page loading and js function execution onloadorready_jquery

This article mainly introduces how to load pages and how to execute onloadorready using js functions. If you need to execute onloadorready, you can refer to the following:
Parse the HTML structure.
Load External scripts and style sheet files.
Parse and execute the script code.
Construct the html dom model.
Load External files such as images.
The page is loaded.

That is:
Html → head → title → # text (webpage title) → style → load style → parse style → link → load external style sheet file → parse external style sheet → script → load external script file → parse external script file → execute external script → body → p → script → load script → parse script → execute script → img → script → load script → parse script → execute script → Load External Image File → page Initialization is complete.

JS initialization load.

Onload
It is called not when the document is loaded, but when all elements (including images) of the page are loaded. if there is a large image on the page and the download takes a long time, the script cannot be initialized until the image is loaded. In severe cases, the user experience will be greatly affected. however, window. onload is not useless. In many cases, some B/S software needs to load all pages before providing user-related functions. onload can provide a "loading" function, or the page content is very small, no document. ready (); onload and ready should be properly used according to various situations.

Use onload to load:

The Code is as follows:

Window. onload = function (){
Var currentRenderer = 'javascript ';
FusionCharts. setCurrentRenderer (currentRenderer );
Var chartObj = new FusionCharts ({
SwfUrl: "Pie3D.swf ",
Width: "290", height: "210 ",
Id: 'samplechart ',
DataSource: "/ucenter/seo/new_seo_tool.php? Check = xml & val ={{ pre_num }}",
DataFormat: FusionChartsDataFormats. XMLURL,
RenderAt: 'chart1p'
}). Render ();
}

Ready
There is a DOMContentLoaded event in W3C, which will be triggered when the DOM (Document Object Model) is loaded.

Method 1:

The Code is as follows:

Similar to Jquery's $ (function () {...}) $ (document). ready (function (){...})
(Function (){
Var ie = !! (Window. attachEvent &&! Window. opera );
Var wk =/webkit \/(\ d +)/I. test (navigator. userAgent) & (RegExp. $1 <525 );
Var fn = [];
Var run = function () {for (var I = 0; I <fn. length; I ++) fn [I] () ;};
Var d = document;
D. ready = function (f ){
If (! Ie &&! Wk & d. addEventListener)
Return d. addEventListener ('domainloaded', f, false );
If (fn. push (f)> 1) return;
If (ie)
(Function (){
Try {d.doc umentElement. doScroll ('left'); run ();}
Catch (err) {setTimeout (arguments. callee, 0 );}
})();
Else if (wk)
Var t = setInterval (function (){
If (/^ (loaded | complete) $/. test (d. readyState ))
ClearInterval (t), run ();
}, 0 );
};
})();

Call time:
Document. ready (function (){
Alert ('OK ');
}

Method 2:

The Code is as follows:

/Use the W3C method if W3C DOM2 is supported
If (document. addEventListener ){
Document. addEventListener ("DOMContentLoaded", te, false );
}
Else if (/MSIE/I. test (navigator. userAgent) {/if it is an IE browser (not supported)
/Create a script tag with the defer attribute. The tag is loaded only when the document is loaded.
Document. write ("
Var script = document. getElementByIdx_x ("_ ie_onload ");
/If the file is indeed loaded, call the initialization method
Script. onreadystatechange = function (){
If (this. readyState = 'complete '){
Te ();
}
}
}
Else if (/WebKit/I. test (navigator. userAgent) {/if it is a Safari browser (not supported)
/Create a timer, which is verified every 0.01 seconds. If the file is loaded, the initialization method is called.
Var _ timer = setInterval (function (){
If (/loaded | complete/. test (document. readyState )){
ClearInterval (_ timer );
Te ();
}
}, 10 );
}
Else {/If none of the above, use the worst method (in this example, Opera 7 will be here)
Window. onload = function (e ){
Te ();
}
}
Function te (){
Alert ('OK ');
}