Запуск ajax во время загрузки главной страницы

Question

Я получил этот скрипт php, который генерирует отчеты, которые занимают от 20 до 30 секунд. Я хотел бы добавить индикатор выполнения, и у меня есть обновление выполнения в моей БД правильно.

Проблема в том, что я не могу использовать jQuery для $.post или $.get, а главная страница сидит там, загружая отчет.

Я могу запустить javascript, как всплывающее окно, в котором говорится «пожалуйста, подождите» и покажите маленькую спиннинг-иконку, но firefox отказывается отправить сообщение ajax/get во время загрузки главной страницы.

В любом случае? Я пытался бросить все это в iframe, но это не работало в эфире. (Я мониторинг трафика с помощью Firebug и HTTP Live заголовков.)

Answer 1

Вы можете иметь нагрузку JQuery в отчете после загрузки вашей страницы, например:

$(document).ready(function() { 
    $('#someDiv').html('<strong>Loading...</strong>') 
       .load('report.html'); 
}); 

Для индикатора выполнения, проверьте jQuery UI Progressbar. Тем не менее, руководство делает этот звук пункт:

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

так, если это так, я бы рекомендовал анимированный спиннера изображение или такие с соответствующим сообщением, например:

$(document).ready(function() { 
    $('#someDiv').html('<img src="images/spinner.gif"/><strong>This could take a while...</strong>') 
       .load('report.html'); 
}); 

Answer 2

Вы могли бы хотеть рассмотреть elementReady. Если вы убедитесь, что ваш сценарий jquery загружен, и часть вашей страницы выписана до того, как процесс, требующий много времени, начнет обрабатываться, вы можете использовать elementReady для запуска какого-либо уведомления. Нет необходимости ждать, пока весь документ будет готов.

Я не уверен, что это будет работать с индикатором выполнения ui, но я использовал его с толстым слоем для серого цвета и блокировал вход на экран до тех пор, пока страница не будет полностью загружена, а толстоблок throbber .gif хорошо работает достаточно как показатель активности.

Answer 3

Для добавления AJAX загрузки страницы эффект анимации: Шаг 1: Добавьте JQuery библиотеку

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 

Шаг 2: Добавьте CSS, чтобы дать прохладный внешний вид (по желанию) Шаг 3: Добавьте следующий JQuery

<script> 

(function($){ 

$("html").removeClass("v2"); 

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) }); 
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) }); 

$(window).load(function(){ 

    $("#progress-bar").stop().animate({ width: "100%" },600,function(){ 
$("#loading").fadeOut("fast",function(){ $(this).remove(); }); 
}); 

}); 
})(jQuery); 
</script> 

Шаг 4: наконец, добавьте html-код, где хотите.