19

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.

TheVillageIdiot
  • 40,053
  • 20
  • 133
  • 188
anvd
  • 3,997
  • 19
  • 65
  • 126
  • 2
    There's no way of telling how much content is on the page, or how much progress has been made in loading it. – zzzzBov Feb 15 '11 at 04:02
  • it is possible, check this example http://www.gayadesign.com/scripts/queryLoader/ – anvd Feb 15 '11 at 04:04
  • 1
    @Fel You just answered your own question, then? – mattsven Feb 15 '11 at 04:08
  • but this example uses a progress bar i need something like that http://flash-templates-today.com/blog/wp-content/uploads/2010/02/index110.png – anvd Feb 15 '11 at 04:10
  • Yes, but I'm pretty sure the example you linked to could be easily adapted to show percentage. EDIT: In fact, it has been: http://www.gayadesign.com/scripts/queryLoader2/ – mattsven Feb 15 '11 at 04:16
  • i found it, it is something like that, now i go investigate the code http://neverforget.us/ – anvd Feb 15 '11 at 04:32

4 Answers4

17

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/

elin3t
  • 1,881
  • 1
  • 24
  • 29
12

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>");
        });
    }
},
TheVillageIdiot
  • 40,053
  • 20
  • 133
  • 188
  • 1
    but the question is the value of the percentage, i can't put a gif in this project – anvd Feb 15 '11 at 04:06
  • Oops :( [gay(a)design] @Fel you say in last line that you want to preload without bar, so this will work in that situation. For showing percentage, I'm trying to find out something. The example you gave (gaydesign) looks promising. – TheVillageIdiot Feb 15 '11 at 05:20
7

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.

elwyn
  • 10,360
  • 11
  • 42
  • 52
  • 2
    +1 I wouldn't say you "can't", but this is my favorite solution. – Pup Sep 29 '11 at 19:37
  • 1
    I like this way. But based on my experiments, I think, the iteration using `each` wouldn't give the index values in the same sequential order. Instead, it might be random sometimes. So, instead of dividing the `index`, I used a separate variable which will increment by 1 each time and I am dividing this counter variable with the length of the array and then multiplied with 100 to obtain the percentage. – Akhilesh B Chandran Dec 02 '12 at 06:08
  • @elwyn It is showing me `Uncaught ReferenceError: arrayOfImageUrls is not defined`?? – w3debugger Jan 13 '17 at 22:16
  • `arrayOfImageUrls ` was an example variable from your own code, you need to actually make it yourself. For example `var arrayOfImageUrls = ['https://example.com/foo.jpg', https://example.com/bar.jpg'];` – elwyn Jan 14 '17 at 21:03
2

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

esafwan
  • 17,311
  • 33
  • 107
  • 166