Common events of window objects

One . Window page load event

 window.onload It's the window ( page ） Loading event , This event is triggered when the document content is fully loaded ( Include images 、 Script files 、CSS Documents, etc. ), Just call the handler .

Be careful ∶
1. With window.onload You can put the JS The code is written to the top of the page element , because onload Yes, wait until all the page contents are loaded , Then execute the processing function .
2. window.onload The traditional method of registering events can only be written once , If there are more than one , I'll take the last window.onload Subject to .
3. If you use addEventListener There is no limit

 DOMContentLoaded Event triggered , Only when the DOM Loading complete , Don't include style sheets , picture ,flash wait .le9 The above supports
If there are many pictures on the page , From user access to onload Triggering may take a long time, and the interaction effect cannot be realized , It's bound to affect the user experience , Use at this time DOMContentLoaded Events are more appropriate .

load Wait until all the page contents are loaded , Include page dom Elements , picture ,f1ash, css wait

DOMContentLoaded yes DOM Loading finished , No pictures falsh css You can execute it later , Loading speed ratio load Faster

Two . Window resizing Events

 window.onresize Is to adjust the window size to load events , Handler function called when triggered .
Be careful ∶
1. As long as the window size changes in pixels , Will trigger this event .
⒉ We often use this event to do responsive layout .window.innerWidth The width of the current screen