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?

score 11 · Accepted Answer · answered Dec 31 '10 at 17:33

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.

score 7 · Answer 2 · edited May 23 '17 at 12:34

Edit: I defer to Keltex's answer. It's a much better solution. I'll leave mine here for posterity (unless I should delete the content and my answer entirely? I'm new here).

Another solution, which was used fairly frequently in the past, is to create a landing page that preloads all of your images. When the preloading is done, it redirects to the actual site. In order for this to work, you'd need to get the URLs to all of the images you want to load, and then do something like this:

# on index.html, our preloader
<script type='text/javascript'>
    // add all of your image paths to this array
    var images = [
        '/images/image1.png',
        '/images/image2.png',
        '/images/image3.png'
    ];

    for(var i in images) {
        var img = images[i];
        var e = document.createElement('img');
        // this will trigger your browser loading the image (and caching it)
        e.src = img;
    }

    // once we get here, we are pretty much done, so redirect to the actual page
    window.location = '/home.html';
</script>
<body>
    <h1>Loading....</h1>
    <img src="loading.gif"/>
</body>

aaahhh...the beauty of old school...+1!! :) – NoobEditor Apr 17 '15 at 11:08 — NoobEditor, Apr 17 '15 at 11:08

score 6 · Answer 3 · answered Dec 31 '10 at 17:41

6

You can do this with JQuery. Say your page looks like this:

<body>
   <div id='loader'>Loader graphic here</div>
   <div id='pagecontent' style='display:none'>Rest of page content here</div>
</body>

You can have a JQuery function to show pagecontent when the entire page is loaded:

$(document).ready(function() {
    $(window).load(function() {
         $('#loader').hide();
         $('#pagecontent').show();
    });
});

answered Dec 31 '10 at 17:41

Keltex

26,220
11
79
111

In this case if the user haven't activated javascript then he doesn't see the div #pagecontent. Right ? – xRobot Dec 31 '10 at 17:58
Isn't the `$(document).ready(function()` quite redundant? `$(window).load` will fire even if it's outside the block. – Tatu Ulmanen Dec 31 '10 at 18:02
You're right, the `ready` handle could probably be removed, but it's not going to hurt anything. – Keltex Dec 31 '10 at 21:44
1

xRobot - that's correct, but you could redo the code to have ready show the loader and hide pagecontent and then $(window).load would reverse this. – Keltex Dec 31 '10 at 21:45

Syed · Answer 4 · 2014-07-08T08:03:15.057

HTML

<div id="preloader">
    <div id="loading-animation">&nbsp;</div>
</div>

JAVASCRIPT

<script type="text/javascript">
    /* ======== Preloader ======== */
    $(window).load(function() {
        var preloaderDelay = 350,
                preloaderFadeOutTime = 800;

        function hidePreloader() {
            var loadingAnimation = $('#loading-animation'),
                    preloader = $('#preloader');
            loadingAnimation.fadeOut();
            preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
        }

        hidePreloader();
    });
</script>

CSS

#preloader {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    position: fixed;
    background-color: #fff;
}

#loading-animation {
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      position: absolute;
      margin: -100px 0 0 -100px;
      background: url('loading-animation.gif') center center no-repeat;
}

Bharath M Shetty · Answer 5 · 2017-04-30T10:28:03.730

Create a div with class name preloader and put a loader inside that div.

style the class preloader just like below

  .preloader {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: white; 
        /* background-color is would hide the data before loading
        text-align: center;
   }

Html

   <div class="preloader">
    Any loader image
   </div>

Jquery

     $(window).load(function(){
        $('.preloader').fadeOut(); // set duration in brackets
    });

A simple page loader is ready....

How to preload a webpage before showing it?

5 Answers5

HTML

JAVASCRIPT

CSS