Domcontentloaded and window onload

Hello everyone , I meet you again , I'm the king of the whole stack

Believe in writing js Of . We all know window.onload Well , But not everyone knows DOMContentLoaded, In fact, even if you don't know . It's very likely that you often use this thing .

In general ,DOMContentLoaded The event should be in window.onload Run before , When DOM When the tree is built, it will run DOMContentLoaded event , and window.onload When the page is loaded , To run . This includes elements such as pictures . Most of the time we just want to DOM After the tree is built , Binding events to elements . We don't need image elements . Plus sometimes the speed of loading Outland pictures is very slow .

We can write code to simply test these two events ：

javascript Code （ Introduced jQuery1.4.1)：

if (document.addEventListener){ function DOMContentLoaded(){ $( "#status" ).text( "DOM is ready now!" ); } document.addEventListener( "DOMContentLoaded" , DOMContentLoaded, false ); } window.onload= function (){ $( "#status" ).text( "DOM is ready AND wondow.onload is excute!" ); }

HTML Code body part ：

<h1> DOM READY's TEST </h1>
<img src="./delay.php" alt="delay image" />
<p id="status"> DOM is not ready </p>

Copy

In order to see the effect clearly , Specially write a simple php file , Provide delayed loading of pictures , The code is as follows ：

sleep(5);
header('Location:./delay.png');

Copy

stay firefox and chrome as well as opera Can clearly see , Before the picture is loaded .id by status The paragraph of has been shown “DOM is ready now!”. Then wait 5 Seconds later , After the picture is loaded , This paragraph shows ”DOM is ready AND wondow.onload is excute!”

This code cannot be used in IE Work in China , On the one hand, I use addEventListener, I made an inference before I started , If this method does not exist, this event will not be added . And the reason for that is IE It really doesn't support DOMContentLoaded The cause of this incident is , For the simplicity of the code . Not for IE Yes . Even though IE There is no such event , But we can simulate this event , The common method is to infer element Of doScroll Assuming success, it means DOM Loading finished .

Common libraries provide encapsulation of this event compatible with various browsers . Suppose you are a jQuery Users , You may often use (document).ready(); Or by (function(){}) This is for DOMContentLoaded Major events

Copyright notice ： This article is the original article of the blogger . Blog , Do not reprint without permission .

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/116789.html Link to the original text ：https://javaforall.cn