предварительная загрузка с процентом - JavaScript / JQuery - PullRequest
Новая
       39

предварительная загрузка с процентом - JavaScript / JQuery

19 голосов
/ 15 февраля 2011

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

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

Ответы [ 4 ]

17 голосов
/ 30 мая 2012

Я рекомендую этот плагин. Это удивительно скачать с 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/

12 голосов
/ 15 февраля 2011

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

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

РЕДАКТИРОВАТЬ: Используя queryLoader скриптпредоставлено gayadesign Мне удалось добиться некоторого успеха: D

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

$(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>");
        });
    }
},
7 голосов
/ 15 февраля 2011

Вы не можете.

Как сказал 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 + '%');
        });
});

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

2 голосов
/ 14 октября 2011

Смотрите этот проект. Он делает то, что вы хотите красиво.

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

Демо размещено здесь

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

Скачать здесь

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

...