preload with percentage - javascript/jquery

Question

I did a Google search and I cannot find a way to do a loading with percentage. Anyone know how I can find an example of that?

I need a preload for a website from 0-100 without bar, before show the content, but I cannot find any example.

Answer 1

If you mean you want to show the content only when it is fully loaded, you may try following two options:

1) wrap all content inside a <div id="wrapper" style="display:none;"></div> tag and on load complete event show it like this:

$(function(){
    $("#wrapper").show();
});

2) If this still does not solves your purpose, you can load empty page and fetch content using ajax:

$(function(){
    $.ajax({ 
        .......//AJAX params
        .......
        success:function(msg){
                    $("#wrapper").html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
                });
});

EDIT: Using queryLoader script provided by gayadesign I was able to achieve some success :D

I had to made some changes to the queryLoader.js file from line 127 to 151. The changed script is as follows. Try it yourself.

$(QueryLoader.loadBar).css({
        position: "relative",
        top: "50%",
        font-size:40px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    });
},

animateLoader: function() {
    var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
    if (perc > 99) {
        $(QueryLoader.loadBar).stop().animate({
            width: perc + "%"
        }, 5000, "linear", function() {
                $(this).html("<strong>100%</strong>");//MY EDIT
                QueryLoader.doneLoad();
            });
    } else {
    $(QueryLoader.loadBar).stop().animate({
        width: perc + "%"
    }, 5000, "linear", function() {
            //MY EDIT
            $(this).html("<strong>"+Math.round(perc)+"%</strong>");
        });
    }
},