First, the page loading order:
Parse HTML structure.
Load external scripts and stylesheet files.
Parse and execute script code.
Construct 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 → div → script → load script → parse script → execute script → img → script → load script → parse script → execute script → load external image file → page initialization completed.
Initial loading of JS.
onload
It is not called when the document is loaded, but when all elements of the page (including images, etc.) are loaded. If there are large-sized images on the page and it takes a long time to download, then the script will never be able to be loaded. Initialization, until the image loading is completed, the user experience will be greatly affected in severe cases. However, window.onload is not useless. In many cases, some B/S software requires that the page be fully loaded before providing user-related functions, so window .onload It can provide a "loading" function, or the page content is very small, and document.ready() is not needed at all; depending on the situation, onload and ready should be used reasonably.
Use onload to load:
Copy the 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 W3C, which is triggered when the DOM (Document Object Model) is loaded.
Method one:
Copy the code code 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('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (i.e.)
(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 calling:
document.ready(function(){
alert('ok');
}
Method two:
Copy the code code as follows:
/If W3C DOM2 is supported, use W3C method
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, which has a defer attribute and will be loaded when the document is loaded.
document.write("
var script = document.getElementByIdx_x("__ie_onload");
/If the document 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 Safari browser (not supported)
/Create a timer, check every 0.01 seconds, and call the initialization method if the document is loaded
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();
}
}
functionte(){
alert('ok');
}