Экран загрузки Jquery, чтобы покрыть большой запрос MySQL через PHP?

Я нахожусь в середине инструмента отчетности для моего клиента, который в основном перестраивает отчеты на лету, если им X дней.

Проблема заключается в том, что отчеты перестраиваются с помощью PHP, и некоторые из них могут быть довольно большими, то есть время загрузки составляет 20-40 секунд.

В данный момент он просто вешает страницу, пока выполняет запрос.

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

Правильно ли я считаю, что до тех пор, пока я загружаю html на страницу ПЕРЕД выполнением запроса, должен отображаться экран загрузки, а затем, когда запрос завершен, я могу поместить еще один фрагмент HTML, чтобы выполнить мета-обновление на другой странице. (очевидно, что перенаправление заголовка исключено, поскольку заголовки уже были бы отправлены).

Если это правильно, кто-нибудь может порекомендовать какие-нибудь полуприличные загрузочные плагины на основе jquery?

Большое спасибо

Источник

2 ответа

Решение

Не уверен, что вы имеете в виду под написанием

Правильно ли я считаю, что до тех пор, пока я загружаю html на страницу ПЕРЕД выполнением запроса, должен отображаться экран загрузки, а затем, когда запрос завершен, я могу поместить еще один фрагмент HTML, чтобы выполнить мета-обновление на другой странице. (очевидно, что перенаправление заголовка исключено, поскольку заголовки уже были бы отправлены).

Но позвольте мне сказать вам, что мы сделали ранее:

При нажатии на кнопку экспорта в XLS-экспорте, требующем много времени, появилось модальное наложение, и запрос на экспорт был отправлен. С этого момента JS постоянно искал печенье с конкретным именем. На стороне сервера был создан экспорт, и после завершения файл cookie был отправлен вместе с данными XLS. JS распознал отправленное печенье и скрыл наложение.

Надеюсь это поможет.

Источник

Вы должны посмотреть на вывод данных на экран с помощью PHP-функции flush(). Это даст пользователям понять, что что-то на самом деле происходит. Существует множество руководств и фрагментов кода, которые показывают, как настроить индикатор выполнения JS/JQuery с помощью flush(). Один пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Progress Bar</title>
</head>
<body>
<!-- Progress bar holder -->
<div id="progress" style="width:500px;border:1px solid #ccc;"></div>
<!-- Progress information -->
<div id="information" style="width"></div>
<?php
// Total processes
$total = 10;

// Loop through process
for($i=1; $i<=$total; $i++){
    // Calculate the percentation
    $percent = intval($i/$total * 100)."%";

    // Javascript for updating the progress bar and information
    echo '<script language="javascript">
    document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\">&nbsp;</div>";
    document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
    </script>';

    // This is for the buffer achieve the minimum size in order to flush data
    echo str_repeat(' ',1024*64);

    // Send output to browser immediately
    flush();

    // Sleep one second so we can see the delay
    sleep(1);
}

// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
?>
</body>
</html>
Источник
Другие вопросы по тегам