EN
JavaScript - display web page after all resources are loaded
0
points
In this article, we would like to show you how to display web page after all resources are loaded using JavaScript.
Quick solution:
- set body visibility to hidden:
<body style="visibility: hidden">, - on window load event change visibility to visible:
document.body.style.visibility = 'visible'.
Practical example
In this section, we present a full working example of how to display web page after all resources are loaded.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<body style="visibility: hidden">
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" height="50px"/>
<div>Image description...</div>
<iframe src="https://dirask.com/about"></iframe>
<script>
window.addEventListener('load', function() {
document.body.style.visibility = ''; // removes visibility style from body
});
</script>
</body>
</html>
Note:
By setting the
visibilityto an empty string (''), we remove it from thebody. Removingvisibilityin fact, sets the property to its default value, so the following line:document.body.style.visibility = '';is equivalent to:
document.body.style.visibility = 'visible'