CODEWITHSUNDEEP
javascripthtmlcsspreloaderimage-preloader
xRobot
xRobot

Reputation: 26565

How to preload a webpage before showing it?

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?

Upvotes: 6

Views: 44798

Answers (5)

Bharath M Shetty
Bharath M Shetty

Reputation: 30605

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....

Upvotes: 3

Syed
Syed

Reputation: 16543

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;
}

Upvotes: 5

Alex Vidal
Alex Vidal

Reputation: 4108

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>

Upvotes: 7

Keltex
Keltex

Reputation: 26446

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();
    });
});

Upvotes: 6

Sarfraz
Sarfraz

Reputation: 382919

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.

Upvotes: 11

Related Questions