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

            });
        });
    });    
});
August 21, 2010

Recommended Javascript Image preloader

Question by Daniel Ribeiro

There are a couple of tools and several tutorials (even some including links to github) on how to preloading images and other artifacts, like css and scripts. YUI3 preloader seems to be the most reliable one.

Is there a better one? Are there any others that are faster (possibly through parallel loading), more usable or has better browser compatibility? Maybe one that uses jquery instead of YUI…

Answer by Starx

I like the jquery preload plugin. Try this………

http://plugins.jquery.com/project/Preload

...

Please fill the form - I will response as fast as I can!