Table of Contents
Foreword
document readystatechange event
document DOMContentLoaded event
window load event
Example
Home Web Front-end JS Tutorial Events and sequence triggered when page loads

Events and sequence triggered when page loads

Oct 14, 2017 am 10:25 AM
event trigger order

Foreword

When the page is loaded, it can be roughly divided into the following steps:

  1. Start parsing the HTML document structure

  2. Loading external style sheets and JavaScript scripts

  3. Parsing and executing JavaScript scripts

  4. DOM tree rendering completed

  5. Loading unfinished external resources (such as pictures)

  6. 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(&#39;resolve body JavaScript&#39;);
   
    window.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;window load&#39;);
    })

    document.addEventListener(&#39;readystatechange&#39;,function(){
      console.log(&#39;document &#39; + document.readyState);
    })

    document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;document DOMContentLoaded&#39;);
    })    //document 没有load事件??    document.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;document load&#39;);
    })  </script>
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use physical gestures to trigger fun on-screen FaceTime effects How to use physical gestures to trigger fun on-screen FaceTime effects Oct 12, 2023 pm 11:49 PM

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] Event ID 4660: Object deleted [Fix] Jul 03, 2023 am 08:13 AM

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

Ways to Inspire Reaction Effects in FaceTime on Mac Ways to Inspire Reaction Effects in FaceTime on Mac Oct 10, 2023 pm 06:09 PM

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

Get upcoming calendar events on your iPhone lock screen Get upcoming calendar events on your iPhone lock screen Dec 01, 2023 pm 02:21 PM

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

iOS 17: How to trigger reaction effects in FaceTime iOS 17: How to trigger reaction effects in FaceTime Sep 22, 2023 pm 01:25 PM

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? Why does event bubbling trigger twice? Feb 22, 2024 am 09:06 AM

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.

In JavaScript, what is the purpose of the 'oninput' event? In JavaScript, what is the purpose of the 'oninput' event? Aug 26, 2023 pm 03:17 PM

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&quot

How to implement change event binding of select elements in jQuery How to implement change event binding of select elements in jQuery Feb 23, 2024 pm 01:12 PM

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:

See all articles