First, page load order:
Parse the HTML structure.
Loads external scripts and style sheet files.
Parse and execute the script code.
Constructs an HTML DOM model.
Load external files such as pictures.
The page has finished loading.
Is
html→head→title→ #text (page 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→div→script→ load script → parse script → execute script →img→script→ load script → parse script → execute script → load external image file → page initialization complete.
Initialization load for JS.
OnLoad
is not invoked when the document is loaded, but only when all the elements of the page, including pictures, are loaded. If you have a large size picture on the page and the download takes a long time, the script will not be initialized until the picture is loaded and the user experience will be greatly affected. However, window.onload is not a useless, in many cases some B/ s software needs to load the page to provide user-related functions, so that window.onload can provide a "load" function, or the content of the page is very small, completely without document.ready (); According to various circumstances, should be reasonable use of onload and ready.
Use onload to load:
Copy Code code 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: ' Chart1div '
}). render ();
}
Ready
There is an event called domcontentloaded in the consortium that fires when the DOM (Document Object model) is loaded.
Method One:
Copy Code code as follows:
A jquery-like $ (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 (' domcontentloaded ', F, false);
if (Fn.push (f) > 1) return;
if (IE)
(function () {
try {d.documentelement.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);
};
})();
When called:
Document.ready (function () {
Alert (' OK ');
}
Method Two:
Copy Code code as follows:
/If you support the DOM2, use the method of the
if (Document.addeventlistener) {
Document.addeventlistener ("domcontentloaded", TE, false);
}
else if (/msie/i.test (navigator.useragent)) {/If it is IE browser (not supported)
/create a script tag that has a defer attribute that will not be loaded until the document has finished loading
document.write ("
var script = document.getelementbyidx_x ("__ie_onload");
/If the document does mount, 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 timer, check every 0.01 seconds, call initialization method if document is finished loading
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 case, Opera 7 will run here)
Window.onload = function (e) {
Te ();
}
}
function Te () {
Alert (' OK ');
}
