Parse the page load with the execution of the js function onload or ready

  • 2020-03-30 00:48:26
  • OfStack

First, page loading order:
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 (page title) - style - load - analytic style - link to load the external stylesheet file, parse the external style sheet - script - load external script files to resolve external script files, the execution external scripts - body > div > script to load scripts, parse the script to execute the script, the img - script - loaded script to parse the script, Execute the script - load the external image file - the page is initialized.

Initial loading of JS.

Not when the document is loaded, but when all the elements of the page (including images, etc.) are loaded. If there is size large images on a page, download will take a long time, the script has been cannot be initialized, until the image is loaded, serious when the user experience will be badly affected. However, the window. The onload also is not useless, in many cases, some of the B/S software needs all the pages are provided only after loading the user related functions, such window. The onload can provide the function of a "load", or the page content rarely, completely without the document, ready (); Depending on the situation, onload and ready should be used appropriately.

Load with onload:

            var currentRenderer = 'javascript';            
            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'

In the W3C there is an event called DOMContentLoaded, which is triggered when the DOM (document object model) is loaded.

Method one:

 Similar to the Jquery the $(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);

A call:
Document. Ready (function () {
      Alert (' ok ');

Method 2:

/ If the support  W3C DOM2,  Use the  W3C  methods  
if (document.addEventListener){ 
    document.addEventListener("DOMContentLoaded", te, false); 
else if (/MSIE/i.test(navigator.userAgent)){/ If it is  IE  The browser ( Does not support ) 
    / To create a  script  The label ,  The label is  defer  attribute ,  when  document  It's not loaded until it's loaded  
    var script = document.getElementByIdx_x("__ie_onload"); 
    / If the document is actually loaded ,  Call the initialization method  
    script.onreadystatechange = function() { 
        if (this.readyState == 'complete') { 
else if (/WebKit/i.test(navigator.userAgent)) {/ If it is  Safari  The browser ( Does not support ) 
/ Create timer ,  every  0.01  Check every second ,  The initialization method is called if the document is loaded  
var _timer = setInterval( function() { 
    if (/loaded|complete/.test(document.readyState)) { 
    }, 10); 
else {/ If none of the above ,  Use the worst way  ( In this case, , Opera 7  Will come here ) 
    window.onload = function(e) { 
function te(){

Related articles: