The difference between onload event and ready event

Time:2021-11-25

I haven’t written an article for a long time. Let’s do another wave. First, the figure above:

The difference between onload event and ready event


Reference link:The difference between onload and ready
See browser working principle for details:How browser works

preface

There are two events after page loading:
One is ready, which means that the document structure (DOM structure) has been loaded (excluding non text media files such as pictures),
The second is onload, which indicates that all elements of the page including images and other files are loaded. (you can say: ready loads before onload!!!)
My understanding: general style control, such as image size control, is loaded in onload; And: the method triggered by the JS event can be loaded in ready;

$(function(){
// do something
});
In fact, this is the abbreviation of JQ ready(), which is equivalent to:
 
$(document).ready(function(){
//do something
})
//Or the following method, the default parameter of jquer is: "document";
$().ready(function(){
//do something
})

The onload event of body is compared with $(document). Ready

Load multi function problem

<body onload="a();b();">
</body>

Functions in native JavaScript are not overloaded, so overrides are implemented

a) The onload event (dom0 level) declared in the body will be overwritten by the following window. Onlad() (dom0 level)

<body onload="a();b()">
</body>
<script>
window.onload = function(){alert('world');}
</script>

The difference between onload event and ready event

b) Multi function execution can only be implemented in onload in body

<body onload="a();b()">
</body>
<srcipt>
function a(){alert('a');}
function b(){alert('b');}
</script>

The difference between onload event and ready event

The difference between onload event and ready event

c) Multiple windows. Load () will overwrite (e.g. a) instances)

window.onload = function(){alert('hello');}
window.onload = function(){alert('world');}

The difference between onload event and ready event

In jQuery, you can use multiple jQuery. Ready () methods, which will be executed in order


Separation of code and content

Onload in body is not separated
Window. Onload () and $(document) and ready () can be separated

Different execution order (the biggest difference)

$(document).ready(): execute after the DOM structure is loaded
window.onload: execute after all files are loaded

$(document).ready(): the biggest difference is that you don’t have to wait for pictures after the DOM is loaded(asynchronous) loadingExecute the JS code when finished

Window.onload usage
<script type='text/javascript'>
function winready(){
    document.getElementByIdx_x.('load').style.display='none';
}
window.onload=winready; // Or window. Onload = function() {winready();}
</scritp>
JQuery usage:
<script type='text/javascript'>
    $(document).ready(function(){
        $('#load').css('display','none');
    })
</script>

$(window).load()

use$(window).load()Method, which will not be triggered until all the contents of the page are loaded, and there is no disadvantage of onload event
The following will appear on the pageAfter all contents are loadedExecute in sequence

<script type="text/JavaScript">
        $(window).load(function() {
            alert("hello");
        });
        $(window).load(function() {
            alert("hello again");
        });
</script>

The corresponding unload event (will be executed when the page is closed)

$(window).unload(function() {
            alert("good bye");
});

Recommended Today

Seven solutions for distributed transactions

1、 What is distributed transaction Distributed transaction means that transaction participants, transaction supporting servers, resource servers and transaction managers are located on different nodes of different distributed systems. A large operation is completed by more than n small operations. These small operations are distributed on different services. For these operations, either all of them are […]