How to preload a webpage before showing it?

Question

I have created a simple webpage with several images, but when a user visits it, the browser loads the images one at a time, instead of all at once.

I want instead to first show a "loading" gif in the center of the page and then, when all the images are downloaded, show the entire webpage to the user at once..

How can I do this?

Answer 1

You can show a loader image by putting it somewhere im <img> tag and use below js code to hide it later on when all images are shown:

window.onload = function(){
  var el = document.getElementById('elementID');
  el.style.display = 'none';
};

Where elementID is supposed to be the id of loader element/tag.

---

The load event fires when all images/frames/external resources are loaded, so by the time that event fires, all images are loaded and we therefore hide the loading message/image here.