August 30, 2010
Preloader with JQuery OR Advanced Page Load Behavior with jQuery Progress Bar
Question by Junaid Saeed
We have a jQuery Progress Bar. Is there a way we can have the progress bar displaying the loading of an HTML page which has PHP, CSS & JavaScript and all in it?
Like a preloader and when the page has been downloaded and rendered fully then display it.
If not with progress bar can we make a preloader with jQuery?
Answer by Starx
Once.. I tried to create this, but It was not pretty. I listed all the things I need to have on a page and increased the progress bar One by one as it was loaded. It was very tremendously long chain. Here is a sample of what I did.
$.getScript('js/lib/ui.js',function() { //Load the Jquery UI
//Call back function after the loading is complete
$("#progressinfo").html("Loading Widgets ..."); //Give the information
$.getScript('js/lib/widget.js',function() { // Load the jquery ui Widget
//Call back function after the loading is complete
$("#progressinfo").html("Loading Widgets: Progress Bar ..."); // Inform
$.getScript('js/lib/widgets/progressbar.js',function() { // Finally load the Jquery UI progressbar
//Call back function after the loading is complete
$("#progressbar").progressbar({ value: 5 }); // change the value of the UI informing the total amount of loadding completion
$("#progressinfo").html("Loading Widgets: some script ..."); //Inform of another script
$.getScript('somescript.js',function() { // Load another script
//Call back function after the loading is complete
$("#progressbar").progressbar({ value: 6 }); // change the value of the UI informing the total amount of loadding
});
});
});
});
