Preloader with jQuery OR Advanced page load behavior using jQuery launcher

Question

We have a jQuery Progress Bar. Is there a way we can have a progress bar displaying loading an HTML page with PHP, CSS and JavaScript and everything in it?

Like the preloader, and when the page has been loaded and displayed in full, display it.

If not with a progress bar, can we do the preloader with jQuery?

Answer 1

.. , . , , , . . , .

$.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

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

Answer 2

,

jQuery Preloader

Answer 3

:

DOM, , . , , :

- :

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

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

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

: ajax loader gif, #preLoader