Bootstrap Page Load Анимация индикатора выполнения - PullRequest
Новая
       12

Bootstrap Page Load Анимация индикатора выполнения

5 голосов
/ 13 марта 2012

Я хочу, чтобы страница загружалась в div, и пока страница загружается, отображается индикатор выполнения (предпочтительно, несколько близкий к фактическому прогрессу загрузки страницы), а затем, после загрузки страницы, сдвиньте панель и отобразите содержимое.

Текущая цепочка событий:

  1. Ссылки по клику пользователя
  2. Индикатор выполнения скользит вниз
  3. Индикатор выполнения анимируется до загрузки страницы
  4. Индикатор выполнения перемещается вверх
  5. Отображение содержимого страницы

Код: 

function pageLoad(url){
    $('body').css('cursor','wait');
    $('#page-load-wrap').slideDown();
    width = $('#page-load-indicator').css('width','100%');
    $('#mainframe').load(url,function(){
        $('#page-load-wrap').slideUp();
        $('body').css('cursor','default');
    }); 
}
  1. Как изменить этот код, чтобы он соответствовал фактическому прогрессунагрузка на ресурс?
  2. Как я могу сдвинуть div до того, как появится содержимое?

======= РЕДАКТИРОВАТЬ =======

Использование кодаВ приведенном ниже ответе я просто установил ширину на 80% перед вызовом функции get, затем в успешном вызове установил ее на 100%.Сдвинул div вверх, а затем отобразил HTML 

       function pageLoad(url){
                $('body').css('cursor','wait');
                $('#mainframe').html('');
                $('#page-load-wrap').slideDown();
                $('#page-load-indicator').css('width','80%');

                $.get(url,function(data){
                $('#page-load-indicator').css('width','100%');
                $('#page-load-wrap').slideUp('slow',function(){
                    $('#mainframe').html(data);
                });
                $('body').css('cursor','default');
                }); 
            }

1 Ответ

1 голос
/ 13 марта 2012

Как бы я изменил этот код, чтобы он соответствовал фактическому прогрессу загрузки ресурса?

Вы не можете просто с помощью javascript.

Как я могу сдвинуть div до того, как появится контент?

Вместо этого используйте $.get, поскольку он позволяет скользить вверх перед настройкой контента: 

function pageLoad(url){
    $('body').css('cursor','wait');
    $('#page-load-wrap').slideDown();
    width = $('#page-load-indicator').css('width','100%');

    $.get(url,function(data){
        $('#page-load-wrap').slideUp();
        $('body').css('cursor','default');

        // and load the html
        $('#mainframe').html(data);
    }); 
}
...