У меня есть куча страниц .php, каждая из которых повторяет веб-страницу html. Полная обработка и загрузка каждой страницы занимает около минуты. Я хочу показать пользователям загружаемое изображение, пока страница загружается полностью.
Я логически подумал о том, как сначала загружается изображение, а основной контент остается скрытым, пока обрабатывается .php; после завершения загрузки php он может отобразить элемент, который действует как триггер для javascript, чтобы изменить стиль отображения основного содержимого со скрытого на блочный. Но я не могу его выполнить; поскольку я предполагаю, что apache требует завершения загрузки php, прежде чем он покажет какой-либо вывод.
Другой вариант, который я вижу, - это изменение всей страницы и загрузка данных с помощью ajax, но мне немного лень это делать, потому что это потребует переписывания всех кодов .php.
Я надеюсь, что кто-нибудь может помочь мне понять, что я делаю неправильно, или есть более эффективный способ выполнить эту задачу.
Одна из стратегий заключается в использовании файлов cookie и промежуточной страницы. Перенаправляем все запросы на промежуточную страницу, у которых нет определенной куки, в промежуточной странице ставим куки.
При использовании apache htaccess или его эквивалента на других серверах нет необходимости изменять страницу вашего приложения.
В htaccess вы проверяете, существует ли файл cookie (например, уже загружаемый), если он не существует, вы делаете перенаправление на «loading.html», а в «loading.html» вы устанавливаете уже загрузка = true, и вы делаете перенаправление на оригинал URL.
Важно, чтобы вы сделали перенаправление в «loading.html» с помощью javascript, потому что с перенаправлением HTTP вы не получите ожидаемого результата.
В «loading.html» вы показываете загрузку изображения, вам нужно будет установить cookie уже загружаемый = true, затем с помощью события onload вы перенаправляете на исходный URL-адрес, в onload вы делаете небольшую задержку или изображение (загрузка) будет зависает без движения в некоторых браузерах:
<script>
window.onload = function() {
setTimeout( function() {
location.replace($ORIGIAL_URL.split('#')[0]);
}, 60 );
};
</script>
По истечении срока действия файла cookie вы можете сделать так, чтобы «loading.html» не перезагружался в течение нескольких дней, часов или минут, в зависимости от ваших потребностей. Другой вариант — установить файл cookie для каждого URL-адреса.
У меня есть аналогичная реализация на нескольких сайтах.
Редактировать:
Чтобы проиллюстрировать стратегию, а не реализацию, в этом простом примере мы не используем htaccess и делаем первую переадресацию на странице с контентом перед загрузкой контента.
Сохранить как index.html:
<!DOCTYPE html>
<html lang = "">
<head>
<title>Content</title>
</head>
<body>
<script>
// check if a cookie exists
if (!document.cookie.match(/^(.*;)?\s*loading\s*=\s*[^;]+(.*)?$/)) {
location.replace('loading.html');
}
</script>
<h1>Content</h1>
</body>
</html>
Сохранить как loading.html:
<!DOCTYPE html>
<html lang = "">
<head>
<title>Loading</title>
</head>
<body>
<h1>Loading...</h1>
<script>
// set cookie
document.cookie = "loading=1;0;path=/";
// redirect
window.onload = function() {
setTimeout( function() {
location.replace('index.html');
}, 2000 );
};
</script>
</body>
</html>
Этот простой пример будет работать даже в firefox локально (file://...), в chrome я сомневаюсь, что он работает локально.
Перенаправление HTTP обрабатывается перед отображением содержимого, вам нужно отобразить содержимое, а затем перенаправить, поэтому вы должны контролировать, когда отображается содержимое страницы «loading.html», и это можно сделать с помощью события загрузки javascript. .
Спасибо, я попробую. Но запрос, почему перенаправление HTTP, не даст ожидаемого результата.