JavaScript instance analysis window page loading event

This article brings you relevant knowledge about javascript, which mainly introduces window window events. window.onload is a window (page) loading event, which occurs when the document content is completely loaded. This event will be triggered. Let’s take a look at it. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

Window page loading Event

window.
onload
 = function() {}或者 window.addEventListener('
load
', function() {});

window.onload is a window (page) loading event. This event will be triggered when the document content is completely loaded (including images, script files, CSS files, etc. ).

Note:

• ##With window.onload, you can write the js code to Above the page element, because onload waits for all page content to be loaded before executing the processing function;

• window.onload The traditional registration method can only be written once. If there are multiple, The last window.onload will prevail.

• There is no limit when using window.addEventListener('load', function() { }).

document.addEventListener(
'DOMContentLoaded'
, function() { })

When the DOMContentLoaded event is triggered, only

When the DOM is loaded, it does not include style sheets, pictures, flash, etc.

If there are many pictures on the page, it may take a long time from user access to onload triggering, and the interactive effect cannot be realized, which will inevitably affect the user experience. In this case,

DOMContentLoaded is more appropriate. .

Event to adjust the window size

window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});

window.onresize is a loading event to adjust the window size. It will be triggered and called whenever

the window size changes in pixels The processing function. This event is often used to complete responsive layout.

window.innerWidthThe width of the current screen.

3f1c4e4b6b16bbbd69b2ee476dc4f83a
      window,addEventListener('resize',function(){
          console.log(window.innerWidth);
      })
     2cacc6d41bbb37262a98f745aa00fbf0

Added:

pageshow event, this event is triggered when the page is displayed, regardless of whether the page comes from the cache. In the reloaded page, pageshow will be triggered after the load event is triggered; Determine whether the pageshow event is triggered by the page in the cache based on persisted in the event object.

Examples are as follows:

window.onload is a window (page) loading event. This event will be triggered when the document content is completely loaded (including images, script files, CSS files, etc.), the processing function is called;

With window.onload, you can write the JS code above the page elements, because onload waits until all the page content is loaded, and then To execute the processing function;

The traditional registration event method of window.onload can only be written once. If there are multiple, the last window.onload will prevail;

If you use addEventListener, there will be no Limitation;

When the DOMContentLoaded event is triggered, only when the DOM is loaded, excluding style sheets, pictures, flash, etc.;

Only supported by le9 and above;

If the picture of the page If there are many, it may take a long time from user access to onload triggering. DOMContentl loaded event can be used;

##Then this;

Click the button to play this; because the code is a loading event registered with addEventListener;

HTML's DOM querySelector() method does not require additional support such as jQuery, and can also easily obtain DOM elements. The syntax is similar to jQuery; querySelector() method only returns Matches the first element of the specified selector;

This is also the first time I have seen this; it looks right;

[Related recommendations: javascript video tutorial

,

webfrontend
】

The above is the detailed content of JavaScript instance analysis window page loading event. For more information, please follow other related articles on the PHP Chinese website!