Is it possible to preload page contents with ajax/jquery technique?

Asked 8/4, 2009 at 2:10 Answered 23/6, 2012 at 13:23

Solved php javascript jquery ajax preloader

Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.

Massproduce answered 8/4, 2009 at 2:10 Comment(0)

There's no need to use Ajax for this. Simply set the page's wrapper div display to none. Then change it to block when the document is loaded.

Your code might look like this, using vanilla javascript:

<script type="text/javascript">
    function preloader() {
        document.getElementById("preloader").style.display = "none";
        document.getElementById("container").style.display = "block";
    }

    window.onload = preloader;
</script>

<style>
div#wrapper {
    display: none;
}

div#preloader {             
    top: 0; right: 10px;
    position:absolute;
    z-index:1000;
    width: 132px; height: 38px;
    background: url(path/to/preloaderBg.png) no-repeat;
    cursor: wait;
    text-shadow: 0px 1px 0px #fefefe;  //webkit                 
}
</style>

<body>
    <div id="preloader">Loading... Please Wait.</div>
    <div id="wrapper">
        <!-- page contents goes here -->
    </div>
</body>

Update, in jQuery:

<script type="text/javascript">
    // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
    $(document).ready(function(){ 
        $("#preloader").hide();
        $("#container").show();
    });
</script>

Related documents: Events/ready, Events/load, CSS/css & Core/$

Firer answered 8/4, 2009 at 3:6 Comment(3)

This did the trick. And it's simple. If you have the time, please do write a jQuery version; although this works well. – Massproduce 8/4, 2009 at 12:21

@bobince Sure the same! so why? StackOverflow considers the statements with preceding # characters as a comment in a code block. simply use that #x. – Firer 10/4, 2009 at 21:59

Alt. jQuery: $("#preloader").hide(); $("#container").show(); – Elbring 15/11, 2010 at 9:28

If you choose a method where the content is hidden until the whole page is loaded, don't have it initially hidden in CSS then unhidden in JavaScript. If you do that, anyone with JavaScript disabled or unavailable will get no page at all. Instead, do both the hiding and the showing from script.

<body>
    <script type="text/javascript">
        document.body.style.visibility= 'hidden';
        window.onload= function() { document.body.style.visibility= 'visible'; };
    </script>

Also note that the term ‘preloader’ isn't really right for what you're doing here. ‘pre’ implies that you're increasing performance by having the page fetched and cached so that it's ready to go by the time it's needed.

But actually this is the opposite: it decreases performance by waiting around showing the user nothing whilst the page is loading, when partial content is available. Defeating progressive rendering makes browsing slower, not faster. It is usually distinctly the Wrong Thing, and except in a few niche cases going with the normal browser progressive rendering is best. This is how the web works; people are used to it by now.

(People, that is, except for the kind of dim-witted management types who don't really use or understand the web but demand that their company's site appears all at once.)

Selfless answered 8/4, 2009 at 9:28 Comment(0)

Best way

function ajax(){
$('#wapal').html('path to image');
$.ajax({
      url:'somfile.php',
         method:'get',
         success:function(data){
         if(data =='') return;
         $('#wapal').html(data);
       }
    });
}

Stirring answered 13/1, 2011 at 12:43 Comment(0)

I did something where I needed to know when an image was fully loaded, so I did the preloading with $.get() function and passed a callback function as the last parameter. This way, when the image was actually downloaded, my callback would fire and I would know that the browser already had the image in cache.

You can write a function that will increment a global variable for each image you tell it to preload, and then your callback can decrement the counter. When the counter is back to zero, call another function. This function now will fire once all images are preloaded.

This is for the images. Everything else can be guaranteed to be loaded when $(document).ready() is fired. So, if you begin your routine at this point, everything on the page should be loaded.

Epizoic answered 8/4, 2009 at 2:24 Comment(0)

You can do it with jquery easily.

SCRIPT


$(window).load(function() {
     $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

STYLES


div#preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

HTML

div id="preloader"

Galangal answered 15/11, 2010 at 8:14 Comment(0)

Some modifications to DMus -Jerad Answer as it does't work when adsense is on the page.

You can do it with jquery easily.

SCRIPT

$(document).ready(function() {
     $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

STYLES

div#preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
 }

HTML

div id="preloader"

Beast answered 23/6, 2012 at 13:23 Comment(0)

Recommended topics

Hot tags