Geek Answers Handbook

How to preload a web page before showing it?

I created a simple web page with several images, but when a user visits it, the browser loads the images one at a time, and not all at once.

Instead, I want to first show the “boot” gif in the center of the page, and then when all the images are loaded, show the user the entire web page at once.

How can i do this?

+6
source share
5 answers

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

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

elementID / .

load // , , / .

+8

: Keltex. . ( ? ).

, , , . , . , URL- , , - :

# 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>
+6

JQuery. , :

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

JQuery pagecontent :

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

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

div div.

,

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

.

+2

More articles:


All Articles