登录查看更多内容

How can you control when your scripts run with DOMContentLoaded and load events?

由人工智能和领英社区提供技术支持

As a front-end developer, you may want to execute some JavaScript code when the document or the window is fully loaded. But how can you control when your scripts run with DOMContentLoaded and load events? In this article, you will learn the difference between these two events, how to listen to them, and how to use them effectively in your web projects.

此文章中的业界达人

由社区从 104 条内容中精选。了解更多

Arun M

Software Engineer @ Zoho ? Building high performant and scalable Frontend Applications ? Frontend, UI, React JS…
Asif Ali

Senior Software Engineer @EPM | Typescript | NextJS | ReactJS | NodeJS | Tailwind | MUI | RTK Query | MicroFrontend |…
Zuhaib Asif

Frontend Web Developer | React.js | Tailwind CSS | JavaScript | CSS | HTML

1 What are DOMContentLoaded and load events?

DOMContentLoaded and load are two events that fire when the browser parses and renders the HTML document. The DOMContentLoaded event occurs when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. The load event occurs when the entire page, including its resources, has been loaded. You can use these events to run your scripts at different stages of the page loading process.

添加您的观点

Arun M

Software Engineer @ Zoho ? Building high performant and scalable Frontend Applications ? Frontend, UI, React JS, Typescript, Javascript (ES6), Redux, Jest
举报内容
DOMContentLoaded event is fired when the HTML is fully loaded and DOM tree is build. It doesn't wait for external stylesheets, or images or subframes to load. Load events is fired when the page is fully loaded and all the resources like images, iframes, stylesheets, async scripts are loaded.

已翻译

赞
Asif Ali

Senior Software Engineer @EPM | Typescript | NextJS | ReactJS | NodeJS | Tailwind | MUI | RTK Query | MicroFrontend | WebRTC | Frontend System Design
举报内容
Certainly, here's a brief overview of controlling script execution with DOMContentLoaded and load events: DOMContentLoaded Event: Fires when the HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. Ideal for executing scripts that manipulate or interact with the document's structure. Load Event: This occurs when the entire page, including stylesheets, images, and other external resources, has finished loading. Useful for scripts that depend on the complete rendering of the page. Using Event Listeners: Attach event listeners to the DOMContentLoaded and load events to execute scripts at specific points in the page lifecycle.

已翻译

赞
Aishwarya Parab

Senior Software Engineer | Top Frontend Development Voice | Freelance Content Writer | Speaker | Simplifying Tech for you | React Frontend Developer | MERN Full Stack Developer
举报内容
DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images and subframes to finish loading. Load event fires when the entire page has fully loaded, including all dependent resources such as stylesheets, images and iframes. So, the first event takes care of the HTML document whereas the second event takes care of the full range of resources including CSS.

已翻译

赞
Maulik Chavda

Frontend @ Lenskart | Ex-[Koo, Mindinventory]
举报内容
DOMContentLoaded and load events are two important events in web development that occur during the lifecycle of a web page. DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. Load event fired when the entire page, including all external resources such as images, stylesheets, and subframes, has finished loading. DOMContentLoaded is early in the page load process, ideal for manipulating the DOM or initializing JavaScript-based features, whereas load is later, suitable for actions that require all resources to be available.

已翻译

赞
Piyumi Hettiarachchi

?? Aspiring Computer Engineering Enthusiastic | UI/UX & Data Science Practitioner | Passionate about Building Innovative Tech Solutions for Real-World Impact | Open to New Opportunities!
举报内容
To effectively control script execution times with DOMContentLoaded and load events, consider dynamically assigning event listeners based on the specific needs of your script. For instance, if a script requires interaction with DOM elements but not loaded images or stylesheets, attach it to the DOMContentLoaded event for faster execution. Conversely, for scripts that depend on the complete loading of all page resources, such as image galleries or custom web fonts, use the load event. Additionally, using the defer attribute in script tags ensures that scripts execute after the DOM is fully parsed but before the DOMContentLoaded event, offering another layer of control.

已翻译

赞

加载更多内容

2 How to listen to DOMContentLoaded and load events?

To listen to DOMContentLoaded and load events, you can use the addEventListener method on the document or the window objects. For example, you can write:

// Run a function when the document is ready
document.addEventListener("DOMContentLoaded", function() {
  console.log("Document is ready!");
});
// Run a function when the window is fully loaded
window.addEventListener("load", function() {
  console.log("Window is fully loaded!");
});

Alternatively, you can use the onload attribute on the <body> or <script> tags to run a function when the load event occurs. For example, you can write:

<body onload="console.log('Window is fully loaded!')">
  <!-- Your HTML content -->
</body>
<script src="your-script.js" onload="console.log('Script is loaded!')"></script>

添加您的观点

ABDELKARIM ELAISSAOUY

Full Stack Developer | Ajincodew Founder | Software Engineer | IT Instructor | Researcher | Content Creator | Freelance | AI & Cybersecurity Enthusiast ?? | IT Engineer ??
举报内容
?To effectively listen to DOMContentLoaded and load events, employ the addEventListener method on the document or window objects. Example usage includes: ?// Run a function when the document is ready document.addEventListener("DOMContentLoaded", function() { console.log("Document is ready!"); }); ?// Run a function when the window is fully loaded window.addEventListener("load", function() { console.log("Window is fully loaded!"); }); ?Alternatively, you can use the onload attribute on <body> or <script> tags for the load event. Choose the method that best suits your needs and enhances the responsiveness of your web applications. DOM ???

已翻译

赞
Ali Raza

?? MERN Stack Developer | Frontend Specialist | Expert in Scalable Web Solutions & API Integration | Crafting High-Performance Apps with React.js | Open to Collaborations
举报内容
To listen for the DOMContentLoaded and load events, use addEventListener() on the document and window objects. For DOMContentLoaded, which fires when the DOM is ready: ```js document.addEventListener("DOMContentLoaded", () => { console.log("DOM is ready"); }); ``` For load, which fires when all assets are loaded: ```js window.addEventListener("load", () => { console.log("Page fully loaded"); }); ``` Alternatively, use the onload attribute on <body> or <script> to run a function when load fires: ```html <body onload="console.log('Page loaded')"> <script src="script.js" onload="console.log('Script loaded')"></script> ```

已翻译

赞
Mykyta Romanishyn

Mendix Developer @ FMO | Efficient and scalable solutions
举报内容
Listening to these events is straightforward. For 'DOMContentLoaded', use: document.addEventListener("DOMContentLoaded", function() { console.log("Document is ready!"); }); For the 'load' event, use: window.addEventListener("load", function() { console.log("Window is fully loaded!"); }); These listeners help you run scripts at precise moments. For instance, in a project, I used 'DOMContentLoaded' to initialize a complex form before images loaded, improving perceived performance. Conversely, I used 'load' to trigger an animation that required all resources to be available. This approach ensures scripts execute exactly when needed.

已翻译

赞
Asif Ali

Senior Software Engineer @EPM | Typescript | NextJS | ReactJS | NodeJS | Tailwind | MUI | RTK Query | MicroFrontend | WebRTC | Frontend System Design
(已编辑)
举报内容
DOMContentLoaded: Use the DOMContentLoaded event by adding an event listener to document.addEventListener('DOMContentLoaded', callback). load: Listen for the load event on the window object using window.addEventListener('load', callback).

已翻译

赞
Piyumi Hettiarachchi

?? Aspiring Computer Engineering Enthusiastic | UI/UX & Data Science Practitioner | Passionate about Building Innovative Tech Solutions for Real-World Impact | Open to New Opportunities!
举报内容
In addition to using addEventListener and onload attributes for listening to DOMContentLoaded and load events, you can further enhance your script's responsiveness by incorporating checks within your JavaScript code to determine if these events have already fired. This is particularly useful when scripts are loaded asynchronously or deferred. For instance, you can check if the document’s readyState is 'complete' or 'interactive', which indicates that DOMContentLoaded might have already fired, and execute your code immediately if true.

已翻译

赞

加载更多内容

3 When to use DOMContentLoaded and load events?

The DOMContentLoaded and load events are useful for different scenarios. You may want to use the DOMContentLoaded event when you need to manipulate the DOM elements as soon as possible, without waiting for the external resources to load. For example, you can use this event to add event listeners, modify styles, or insert dynamic content to the document.

You may want to use the load event when you need to access the external resources or the dimensions of the window after they have been loaded. For example, you can use this event to preload images, calculate layout, or initialize animations.

添加您的观点

Zuhaib Asif

Frontend Web Developer | React.js | Tailwind CSS | JavaScript | CSS | HTML
举报内容
Use the DOMContentLoaded event when you want to execute code as soon as the basic structure of your webpage (like text and images) is ready. This is useful for tasks that don't depend on external resources, such as setting up the page's initial state or manipulating the DOM. Use the load event when you want to wait until the entire webpage, including all styles, images, and external resources, is fully loaded. This is beneficial for tasks that require everything on the page to be available, like calculating dimensions or working with elements that depend on external files.

已翻译

赞
ABDELKARIM ELAISSAOUY

Full Stack Developer | Ajincodew Founder | Software Engineer | IT Instructor | Researcher | Content Creator | Freelance | AI & Cybersecurity Enthusiast ?? | IT Engineer ??
举报内容
?Understanding when to use DOMContentLoaded?? and load events is key in front-end development. Opt for DOMContentLoaded when swift manipulation of DOM elements is required, such as adding event listeners, modifying styles, or inserting dynamic content without waiting for external resources. ?On the other hand, leverage the load event when accessing external resources or window dimensions post-loading is essential. This includes tasks like preloading images, calculating layout, or initializing animations. ?Choosing the right event enhances the efficiency and performance of your web applications?? ---------------

已翻译

赞
Mykyta Romanishyn

Mendix Developer @ FMO | Efficient and scalable solutions
举报内容
Use 'DOMContentLoaded' when you need to manipulate DOM elements immediately after the HTML is parsed. This is perfect for setting up event listeners, modifying styles, or inserting dynamic content without waiting for external resources. For example, adding interactivity to form elements can be done here. Use the 'load' event when your script depends on the full load of all resources, like calculating the layout or preloading images. In a project, I used 'load' to ensure all images were ready before running a carousel, preventing layout shifts. Choosing the right event improves performance and reliability.

已翻译

赞
Mohammad Abbas Abidi

Full-stack developer @Connect Planning | Crafting Engaging UI/UX | Open Source | Next.js
举报内容
DOMContentLoaded is ideal for immediate tasks, like setting up initial page structures or loading basic content. For instance, creating a dynamic navigation menu before images load. Load event is best for actions requiring all resources, like resizing images or initializing complex scripts. For example, a slideshow that starts after all images and stylesheets are fully loaded

已翻译

赞
Piyumi Hettiarachchi

?? Aspiring Computer Engineering Enthusiastic | UI/UX & Data Science Practitioner | Passionate about Building Innovative Tech Solutions for Real-World Impact | Open to New Opportunities!
举报内容
Furthermore, integrating intelligent decision-making based on the content type and interaction requirements can optimize when to use DOMContentLoaded versus load. For instance, in web applications where initial user interaction is crucial, such as forms or interactive maps, utilizing DOMContentLoaded ensures that the UI is interactive more quickly. Alternatively, for content-heavy websites that rely on full visual elements and media, such as online portfolios or media galleries, the load event is more appropriate to ensure all content is visually formatted and fully operational before user interaction begins.

已翻译

赞

加载更多内容

4 What are the drawbacks of DOMContentLoaded and load events?

While DOMContentLoaded and load events are handy, they also have some drawbacks that you should be aware of. One drawback is that they may not fire if the script is loaded dynamically or asynchronously. In this case, you may need to use other methods, such as checking the readyState property of the document, or using promises or callbacks to ensure that your script runs at the right time.

Another drawback is that they may fire too late or too early for your needs. For example, if your script depends on some user interaction or some data from the server, the DOMContentLoaded or load events may not be sufficient. In this case, you may need to use other events, such as click, input, or fetch, to trigger your script when the user or the data is ready.

添加您的观点

Dmitrii Saricev

Senior Web Engineer
举报内容
Tips: For faster interaction, start with DOMContentLoaded. For full resource-dependent features, wait for load. Remember, DOMContentLoaded is quicker but less comprehensive, while load ensures everything is ready. Always test across different browsers for consistent behavior.

已翻译

赞
Guilherme Scotti

Staff Frontend Engineer | Javascript | Vue | React | Nuxt | Frontend Leadership | Performance Optimisation
举报内容
?? DOMContentLoaded Drawbacks: ?? ?? May not wait for assets like images, potentially causing issues if scripts rely on these assets. ?? Might fire too early or late for specific needs, mainly if scripts depend on user interactions or data from the server. ?? Load Event Drawbacks: ?? ?? Waiting for all assets to load can result in slower script execution, impacting the perceived page load time. ?? Like DOMContentLoaded, load events may fire at inconvenient times for scripts reliant on specific user interactions or server data.

已翻译

赞
Zain Ul Abbdin

MERN Stack Engineer | UI Perfectionist | Creating Stunning & Scalable Web Applications
举报内容
Dynamic Script Woes: These events might not fire for dynamically loaded JavaScript. Consider readyState checks or promises for more control. Timing Challenges: They might trigger before/after your ideal moment. For user interaction or server data, explore events like click or fetch for precise execution. By understanding these drawbacks, you can leverage these events effectively and ensure your JavaScript runs when it truly matters!

已翻译

赞
Piyumi Hettiarachchi

?? Aspiring Computer Engineering Enthusiastic | UI/UX & Data Science Practitioner | Passionate about Building Innovative Tech Solutions for Real-World Impact | Open to New Opportunities!
举报内容
Additionally, over-reliance on DOMContentLoaded and load events can lead to scripts that perform poorly on slower networks or devices. This is particularly problematic for users in regions with less reliable internet connections. A best practice to mitigate this drawback is to implement progressive enhancement techniques. By structuring your web application to function at a basic level without the full DOM or all resources fully loaded, you enhance accessibility and usability. For instance, essential functionalities can be made available immediately using inline scripts in the HTML while less critical features load asynchronously.

已翻译

赞
Asif Ali

Senior Software Engineer @EPM | Typescript | NextJS | ReactJS | NodeJS | Tailwind | MUI | RTK Query | MicroFrontend | WebRTC | Frontend System Design
举报内容
DOMContentLoaded: May not wait for assets like images, potentially causing issues if your script relies on them. load: Waiting for all assets to load can lead to slower script execution, affecting the perceived page load time.

已翻译

赞

加载更多内容

5 How to optimize your scripts for performance and user experience?

Finally, you should always consider the performance and user experience implications of your scripts. You should avoid blocking the main thread with heavy or long-running scripts, as this may delay the page loading or make the page unresponsive. You can use techniques such as code splitting, lazy loading, or web workers to optimize your scripts and reduce their impact on the page loading.

You should also avoid running unnecessary or redundant scripts, as this may waste the browser's resources and the user's bandwidth. You can use techniques such as debouncing, throttling, or caching to prevent your scripts from running too often or too many times.

By understanding how to control when your scripts run with DOMContentLoaded and load events, you can improve your front-end development skills and create better web applications.

添加您的观点

ABDELKARIM ELAISSAOUY

Full Stack Developer | Ajincodew Founder | Software Engineer | IT Instructor | Researcher | Content Creator | Freelance | AI & Cybersecurity Enthusiast ?? | IT Engineer ??
举报内容
?Optimizing scripts for performance and user experience is crucial in front-end development. Avoid blocking the main thread with heavy scripts to prevent delays or unresponsiveness during page loading. Techniques like code splitting, lazy loading, and web workers can be employed to reduce script impact. ?Furthermore, steer clear of unnecessary or redundant scripts to conserve browser resources and user bandwidth. Techniques like debouncing, throttling, and caching help prevent scripts from running excessively. ?Mastering control over script execution with ??DOMContentLoaded and load events not only enhances front-end development skills but also contributes to creating more efficient and responsive web applications?? ------------

已翻译

赞
Asif Ali

Senior Software Engineer @EPM | Typescript | NextJS | ReactJS | NodeJS | Tailwind | MUI | RTK Query | MicroFrontend | WebRTC | Frontend System Design
(已编辑)
举报内容
To optimize scripts for performance and user experience there are the following reasons. Defer or Async Attributes: Use the defer or async attributes on script tags to control when scripts are executed, improving parallel loading. Lazy Loading: Employ lazy loading for non-essential scripts, loading them only when needed, reducing the initial page load time. Minification and Compression: Minify and compress your scripts to reduce their size, enhancing both loading speed and user experience.

已翻译

赞
MAZAHER KHAKSAR

Frontend Developer at Mehrayan Alpha | React, Next.js and Wordpress Expert
举报内容
To optimize your scripts for performance and user experience, avoid blocking the main thread with heavy or long-running scripts, as this can delay page loading or cause unresponsiveness. Techniques like code splitting, lazy loading, and using web workers can help reduce the impact on page loading. Also, avoid running unnecessary or redundant scripts to save browser resources and user bandwidth. Use debouncing, throttling, or caching to prevent scripts from running too frequently. By effectively managing when your scripts run with DOMContentLoaded and load events, you can enhance your front-end development skills and create more efficient web applications

已翻译

赞
Guilherme Scotti

Staff Frontend Engineer | Javascript | Vue | React | Nuxt | Frontend Leadership | Performance Optimisation
举报内容
??Optimizing Script Execution ?? ?? Avoid blocking the main thread with heavy scripts during page loading to prevent delays; utilize code splitting, lazy loading, and web workers to reduce script impact. ?? Always clear unnecessary or redundant scripts to save browser resources and user bandwidth; implement techniques such as debouncing, throttling, and caching to prevent excessive script execution.

已翻译

赞
Piyumi Hettiarachchi

?? Aspiring Computer Engineering Enthusiastic | UI/UX & Data Science Practitioner | Passionate about Building Innovative Tech Solutions for Real-World Impact | Open to New Opportunities!
举报内容
To further optimize script performance and enhance user experience, incorporating modern JavaScript frameworks and libraries can be highly beneficial. These tools often provide built-in methods for handling DOM manipulations and event handling more efficiently. For instance, frameworks like React or Vue.js use virtual DOMs, which minimize direct DOM interactions and batch updates, significantly reducing re-render times and improving responsiveness. Additionally, these frameworks often support server-side rendering, which can display content to the user faster by rendering pages on the server instead of the client.

已翻译

赞

加载更多内容

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

添加您的观点

ABDELKARIM ELAISSAOUY

Full Stack Developer | Ajincodew Founder | Software Engineer | IT Instructor | Researcher | Content Creator | Freelance | AI & Cybersecurity Enthusiast ?? | IT Engineer ??
举报内容
? In your front-end development journey, remember to harness the power of DOMContentLoaded and load events strategically. Begin by understanding the difference: DOMContentLoaded for early DOM manipulation and load for actions dependent on all resources. -------- ?Listen to these events using addEventListener or the onload attribute, choosing the method that aligns with your objectives. Whether it's swift DOM updates, accessing external resources, or calculating dimensions, tailor your approach. ---------- ?Above all, optimize your scripts for peak performance and user experience. Avoid main thread blocking with techniques like code splitting and lazy loading. Be mindful of script redundancy, employing debouncing, throttling, and caching??

已翻译

赞
Guilherme Scotti

Staff Frontend Engineer | Javascript | Vue | React | Nuxt | Frontend Leadership | Performance Optimisation
举报内容
?? Utilize the defer or async attributes on script tags for better control over script execution, enhancing parallel loading and overall performance. ?? Implement lazy loading for non-essential scripts to reduce the initial page load time and leverage minification and compression to decrease script size, improving loading speed and enhancing the user experience.

已翻译

赞
Cristianto Rian Tarra

Awarded Most Innovative Strategic Digital Transformation Expert by The Developer Awards 2024
举报内容
Understanding how to use DOMContentLoaded and load events in front-end development is crucial for effectively controlling script execution on web projects. Using DOMContentLoaded allows scripts to execute immediately after the basic page structure loads, while the load event is useful when access to external resources or window dimensions is needed after the entire page loads. Additionally, listening to these events carefully and considering script optimization for performance and user experience are vital aspects of responsive and efficient web development. In my experience, by understanding and applying these principles, developers can enhance the quality and performance of their websites without sacrificing speed or user experience.

已翻译

赞
Praveen Kumar Purushothaman

7x LinkedIn Top Voice ?? | Views Are My Own | Director of Engineering | YouTuber | FullStack JavaScript Specialist | Careers Mentor | Hackathon Hunter | ReactJS | Speaker | DevRel | Top 0.05% Overall in Stack Overflow
举报内容
One valuable insight worth mentioning is the importance of progressive enhancement in web development. This approach involves starting with a baseline of functional HTML and then layering on enhancements using CSS and JavaScript. By focusing on core content and functionality first, developers ensure that their websites are accessible and usable even in less capable browsers or under suboptimal network conditions. Progressive enhancement not only improves accessibility but also future-proofs websites, as they remain functional and adaptable to evolving technologies and user needs over time. Embracing this mindset fosters inclusivity and resilience in web design, ultimately leading to more robust and user-friendly online experiences.

已翻译

赞
George Nikolaidis

Software Developer
举报内容
Balance the necessity of running scripts early with the potential impact on performance. Regularly test your website's loading and execution times under different conditions. Additionally, keep up to date with new browser features and APIs that offer more control and insight into the loading process, allowing for further optimizations.

已翻译

赞

Front-end Development

+ 关注

给文章评分

我们借助人工智能创建了此文章。您认为这篇文章怎么样？

很棒不太好

举报此文章

查看全部

How can you control when your scripts run with DOMContentLoaded and load events?

1

2

3

4

5

6

1 What are DOMContentLoaded and load events?

2 How to listen to DOMContentLoaded and load events?

3 When to use DOMContentLoaded and load events?

4 What are the drawbacks of DOMContentLoaded and load events?

5 How to optimize your scripts for performance and user experience?

6 Here’s what else to consider

Front-end Development

给文章评分

感谢您的反馈

更多Front-end Development相关文章

更多相关阅读内容