Question

114

How to preload a webpage before showing it?

rated 0 times [ 116] [ 2] / answers: 1 / hits: 40099 / 14 Years ago, fri, december 31, 2010, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

terrellhunterm

Add To Favorites

Follow

Total Points: 82

Total Questions: 109

Total Answers: 98

Location: Vietnam

Member since Sun, Oct 18, 2020

4 Years ago

terrellhunterm questions

1 How to get absolute URL in production?

Mon, Aug 31, 20, 00:00, 4 Years ago

1 reset v-text-field to empty text without triggering a must not be empty-rule

Fri, Mar 20, 20, 00:00, 4 Years ago

1 How import module dependencies from other npm dependency?

Mon, Aug 5, 19, 00:00, 5 Years ago

1 Trying to use koa bodyparser and ctx.body undefined

Thu, Apr 4, 19, 00:00, 5 Years ago

1 How to set React-Particles-Js to background using React?

Mon, Mar 11, 19, 00:00, 5 Years ago

View All

answered 14 Years ago alexandreah · Accepted Answer

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.