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

I recommend this plugin. Its amazing download from http://demo.inwebson.com/download/jpreloader.zip see in action here http://www.inwebson.com/demo/jpreloader/

<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
  $(document).ready(function() {
  $('body').jpreLoader();
    });
// ]]></script>

here are the links to new version jpreloader 2.1 http://demo.inwebson.com/download/jpreloader-v2.zip http://www.inwebson.com/demo/jpreloader-v2/

Answer 2

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>");
        });
    }
},

Answer 3

You can't.

As zzzzBov said, it isn't known how much content there will be, or what size that content is.

You could 'fake' it, with something like this (for the example I am using images):

var percentCounter = 0;

$.each(arrayOfImageUrls, function(index, value) {
    $('<img></img>').attr('src', value)    //load image
        .load(function() {
            percentCounter = (index / arrayOfImageUrls.length) * 100;    //set the percentCounter after this image has loaded
            $('#yourProgressContainer').text(percentCounter + '%');
        });
});

As I mentioned this isn't a TRUE percentage of the sites loading, but a rough estimate of the images that have loaded, assuming each image is roughly the same size.

Answer 4

See this Project. It does what you want nicely.

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

The demo is hosted here

http://www.gayadesign.com/scripts/queryLoader/

Download it here

http://www.gayadesign.com/scripts/queryLoader/queryLoader.zip