Keywords: JavaScript | Page Loading | Loading Icon | User Experience | Web Development
Abstract: This article provides a comprehensive guide on using native JavaScript to display loading icons during webpage loading until complete page readiness. It covers the document.readyState property for monitoring loading states, CSS positioning and visibility control, and includes complete code examples for HTML structure, JavaScript event handling, and CSS styling. Practical considerations and best practices are discussed to enhance user experience.
Page Loading State Monitoring Mechanism
In modern web development, providing excellent user experience is crucial. When page loading times are extended, displaying loading icons can effectively alleviate user waiting anxiety. JavaScript provides the document.readyState property to monitor document loading states, which serves as the core mechanism for implementing this functionality.
Implementation Principles and Code Analysis
Through the document.onreadystatechange event listener, we can capture changes in document loading states. When the state changes to interactive, it indicates the document has been parsed but sub-resources are still loading; when it changes to complete, it signifies the page is fully loaded.
HTML Structure Design
A proper HTML structure forms the foundation for implementing loading effects. Two main containers need to be created: one for displaying the loading icon and another for housing the actual page content.
<body>
<div id="load"></div>
<div id="contents">
Main content area of the page
</div>
</body>JavaScript Event Handling
JavaScript code is responsible for monitoring page loading states and controlling element visibility. It hides the content area during the interactive state and hides the loading icon while displaying content during the complete state.
document.onreadystatechange = function () {
var state = document.readyState;
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}CSS Styling Configuration
CSS styling ensures the loading icon covers the entire viewport and remains on the top layer through the z-index property. A semi-transparent overlay enhances visual effects.
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("loading.gif") no-repeat center center rgba(0,0,0,0.25)
}Practical Application Considerations
In practical applications, the impact of page loading speed on user experience must be considered. If pages load quickly, loading icons might flash briefly and become disruptive. It's recommended to use this functionality on pages with longer loading times and place JavaScript code at the bottom of the page to avoid rendering blockage.
Comparison with Alternative Implementation Methods
Referencing other technical solutions, such as using jQuery's ajaxStart() and ajaxComplete() methods, or specialized modules like Drupal's Page Throbber module. However, the native JavaScript solution offers better performance and compatibility without relying on external libraries.
Performance Optimization Recommendations
To further enhance performance, consider using lighter loading animations, optimizing image resources, and appropriately setting timeout durations. On mobile devices, touch event responsiveness must also be considered.
Browser Compatibility
The document.readyState property is well-supported in modern browsers including Chrome, Firefox, Safari, and Edge. For older IE browsers, additional compatibility handling may be required.