CODEWITHSUNDEEP
jqueryjquery-ui
user1875280
user1875280

Reputation: 35

jqueryui progress bar until page completly loads

For this example, go to blacksabbath.com and see how the progress bar stays on top until the page completely loads. How does one replicate this using the jqueryui progress bar? TIA!

Upvotes: 0

Views: 8420

Answers (3)

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Basically for this process, you are not actually loading the page, you are making an ajax call. The page might be like this:

<div class="body"></div> This is used as an imaginary body tag.

Than you make an ajax call as:

window.onload = loadPage; this will make sure it runs when the page is loaded.

Here is the example: http://jsfiddle.net/NEfR2/

Then after this you can load the page via ajax request: 

$(document).ready(function(){  
   function loadPage (){   
   $("#image_loading").show();    
     $.ajax({  // start the ajax request..  
     url: "link_to_the_page",  //the page where the data is saved
     data: "query_strings_if_any",  
     success: function (result) {  
     $("#image_loading").hide();  
     $(".body").html(result); 
   }    
 });  
 }  
}

This will first start showing the loading image, and once the ajax request is complete and response is sent back. The Image will be hidden .hide() and the response will be written in the imaginary body tag <div class="body"></div>. I hope this is the basic.

The image can be any gif or some image that will let you tell the user that the stuff is being loaded.

Upvotes: 1

Simon Fischer
Simon Fischer

Reputation: 1208

They are using jPreLoader on their website. Here is the link to it: http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images/

Upvotes: 3

Dejv
Dejv

Reputation: 954

You can render white page only with progress bar inside jQuery loaded, then you can easily control your progressbar as you load rest of the page using AJAX.

This is the easiest way IMHO.

Upvotes: 0

Related Questions