Preloader with JQuery OR Advanced Page Load Behavior with jQuery Progress Bar

Question

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?

Solution 1

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

            });
        });
    });    
});

Solution 2

look what i found

jQuery Preloader and here is the demo

Solution 3

Easiest and still sexy way:

hide all the content until the DOM is ready, except for the loading icon which is centered in the page. Then when the content loads, remove the loading icon:

something like this:

                jQuery(function( $ ){
                        function preLoad() {
                            $("#content").addClass("hidden");
                        }

                        function loaded() {
                            $("#content").removeClass("hidden");
                            $('div#preLoader').css({display:'none'}).remove();
                        }

                        preLoad();
                        window.onload=loaded;
                });

EDIT: You'll need an ajax loader gif to place as the background image of #preLoader