Events and sequence triggered when page loads
Foreword
When the page is loaded, it can be roughly divided into the following steps:
Start parsing the HTML document structure
Loading external style sheets and JavaScript scripts
Parsing and executing JavaScript scripts
DOM tree rendering completed
-
Loading unfinished external resources (such as pictures)
The page is loaded successfully
So what are triggered in the whole processWhat about the commonly used events?
document readystatechange event
readyState The attribute describes the loading status of the document. Document.readyState will continue to change during the entire loading process, and each change will trigger the readystatechange event.
readyState has the following status:
Loading / Loading document
is still loading.
Interactive / The interactive document has completed loading and the document has been parsed, but sub-resources such as images, stylesheets and frames are still loading.
Complete / Complete T document and all sub-resources have been loaded. The status indicates that the load
event is about to be triggered.
For example, in step 2 corresponding to interactive and after step 5 corresponding to complete, the readystatechange event will be triggered.
PS: readyState and XMLHttpRequest.readyState when loading documents, images, etc. are different. Pay attention to distinguish
document DOMContentLoaded event
The DOMContentLoaded event is triggered when the DOM tree rendering is completed. At this time, external resources may still be loading. The ready event in jquery has the same effect
window load event
When all resources are loaded, the load event of the window will be triggered.
The load event of document cannot be triggered, but there is this event on MDN? Ask God for guidance! ! !
Example
<h1>测试页面加载时,事件触发次序</h1> <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt=""> <h1>测试页面加载时,事件触发次序</h1> <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt=""> <h1>测试页面加载时,事件触发次序</h1> <script type="text/javascript"> console.log('resolve body JavaScript'); window.addEventListener('load',function(){ console.log('window load'); }) document.addEventListener('readystatechange',function(){ console.log('document ' + document.readyState); }) document.addEventListener('DOMContentLoaded',function(){ console.log('document DOMContentLoaded'); }) //document 没有load事件?? document.addEventListener('load',function(){ console.log('document load'); }) </script>
The log output in chrome is as follows:
resolve body JavaScript --> document interactive --> document DOMContentLoaded --> document complete --> window load
Exactly as expected. Therefore, scripts that only need the document structure to be loaded before they can be executed can monitor DOMContentLoaded; scripts that need all content to be loaded before they can be executed should monitor window.onload or document.readyState === 'complete'.
The above is the detailed content of Events and sequence triggered when page loads. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

In iOS17 and iPadOS17, Apple introduced Message-like FaceTime reactions on iPhone and iPad. Instead of selecting icons from a menu, you can trigger them with physical gestures during a FaceTime call. When you make a FaceTime video call on an iPhone running iOS 17 or an iPad running iPadOS 17, you can trigger screen effects such as hearts, balloons, confetti, fireworks, etc. The visual effects will fill the display in your FaceTime call video. Sometimes spectacular for others to watch. You are hands-free and can trigger these reactions using only physical gestures. For example, a thumbs up
![Event ID 4660: Object deleted [Fix]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Some of our readers encountered event ID4660. They're often not sure what to do, so we explain it in this guide. Event ID 4660 is usually logged when an object is deleted, so we will also explore some practical ways to fix it on your computer. What is event ID4660? Event ID 4660 is related to objects in Active Directory and will be triggered by any of the following factors: Object Deletion – A security event with Event ID 4660 is logged whenever an object is deleted from Active Directory. Manual changes – Event ID 4660 may be generated when a user or administrator manually changes the permissions of an object. This can happen when changing permission settings, modifying access levels, or adding or removing people or groups

In macOS Sonoma, Apple introduced message-like reactions for FaceTime. However, instead of being triggered by text, they can be triggered by gestures. When you make a FaceTime video call on a Mac running macOS Sonoma or later, you can trigger screen effects such as hearts, balloons, confetti, fireworks, and more that flood the display on the FaceTime call window. You can trigger these layer screen effects via the green FaceTime menu bar item, which includes a mini webcam view and buttons to trigger reactions, or you can go hands-free and trigger the same reactions using just physical gestures. For example, a thumbs up triggers a like, two

On iPhones running iOS 16 or later, you can display upcoming calendar events directly on the lock screen. Read on to find out how it's done. Thanks to watch face complications, many Apple Watch users are used to being able to glance at their wrist to see the next upcoming calendar event. With the advent of iOS16 and lock screen widgets, you can view the same calendar event information directly on your iPhone without even unlocking the device. The Calendar Lock Screen widget comes in two flavors, allowing you to track the time of the next upcoming event, or use a larger widget that displays event names and their times. To start adding widgets, unlock your iPhone using Face ID or Touch ID, press and hold

In iOS17, Apple introduced message-like reactions in FaceTime. However, instead of being triggered by text, they can be triggered by gestures. When you make a FaceTime video call on an iPhone running iOS 17, you can now trigger screen effects such as hearts, balloons, confetti, fireworks, and more that flood the display over the FaceTime call window. You can trigger these layer screen effects by long-pressing on a picture in FaceTime, which will bring up a menu of reaction options, or you can go hands-free and trigger the same reactions using just physical gestures. For example, one thumbs up triggers a like, and two thumbs up are fireworks. Likewise, a thumbs down does not count

Why does event bubbling trigger twice? Event bubbling (Event Bubbling) means that in the DOM, when an element triggers an event (such as a click event), the event will bubble up from the element to the parent element until it bubbles to the top-level document object. . Event bubbling is part of the DOM event model, which allows developers to bind event listeners to parent elements, so that when child elements trigger events, the events can be captured and processed through the bubbling mechanism. However, sometimes developers encounter events that bubble up and trigger twice.

When a value is added to the input box, the oninput event occurs. You can try running the following code to understand how to implement oninput events in JavaScript - Example<!DOCTYPEhtml><html> <body> <p>Writebelow:</p> <inputtype="text"

jQuery is a popular JavaScript library that can be used to simplify DOM manipulation, event handling, animation effects, etc. In web development, we often encounter situations where we need to change event binding on select elements. This article will introduce how to use jQuery to bind select element change events, and provide specific code examples. First, we need to create a dropdown menu with options using labels:
