Preload с процентом - javascript/jquery

Я сделал поиск Google, и я не могу найти способ сделать загрузку с процентом. Кто-нибудь знает, как я могу найти пример этого?

Мне нужна предварительная загрузка для сайта с 0-100 без бара, прежде чем показывать контент, но я не могу найти какой-либо пример.

Ответы

Ответ 1

Если вы хотите показывать контент только в том случае, если он полностью загружен, вы можете попробовать следующие два варианта:

1) оберните весь контент внутри тега <div id="wrapper" style="display:none;"></div> и в завершении загрузки выполните его следующим образом:

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

2) Если это еще не решает вашу цель, вы можете загрузить пустую страницу и получить контент с помощью ajax:

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

EDIT: используя queryLoader script, предоставленный gayadesign, я смог добиться некоторого успеха: D

Мне пришлось внести некоторые изменения в файл queryLoader.js из строки с 127 по 151. Измененный script выглядит следующим образом. Попробуйте сами.

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

Ответ 2

Я рекомендую этот плагин. Его удивительный скачать с http://demo.inwebson.com/download/jpreloader.zip см. в действии здесь 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>

вот ссылки на новую версию jpreloader 2.1 http://demo.inwebson.com/download/jpreloader-v2.zip http://www.inwebson.com/demo/jpreloader-v2/

Ответ 3

Вы не можете.

Как сказал zzzzBov, неизвестно, сколько будет контента или какого размера этот контент.

Вы можете "подделать" его, с чем-то вроде этого (для примера я использую изображения):

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 + '%');
        });
});

Как я уже говорил, это не ИСТИННЫЙ процент загрузки сайтов, а грубая оценка загруженных изображений, если каждое изображение имеет примерно одинаковый размер.