Как показать загрузчик для php-страницы?

У меня есть куча страниц .php, каждая из которых повторяет веб-страницу html. Полная обработка и загрузка каждой страницы занимает около минуты. Я хочу показать пользователям загружаемое изображение, пока страница загружается полностью.

Я логически подумал о том, как сначала загружается изображение, а основной контент остается скрытым, пока обрабатывается .php; после завершения загрузки php он может отобразить элемент, который действует как триггер для javascript, чтобы изменить стиль отображения основного содержимого со скрытого на блочный. Но я не могу его выполнить; поскольку я предполагаю, что apache требует завершения загрузки php, прежде чем он покажет какой-либо вывод.

Другой вариант, который я вижу, - это изменение всей страницы и загрузка данных с помощью ajax, но мне немного лень это делать, потому что это потребует переписывания всех кодов .php.

Я надеюсь, что кто-нибудь может помочь мне понять, что я делаю неправильно, или есть более эффективный способ выполнить эту задачу.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Одна из стратегий заключается в использовании файлов 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, не даст ожидаемого результата.

SUNITA GUPTA 05.01.2023 12:34

Перенаправление HTTP обрабатывается перед отображением содержимого, вам нужно отобразить содержимое, а затем перенаправить, поэтому вы должны контролировать, когда отображается содержимое страницы «loading.html», и это можно сделать с помощью события загрузки javascript. .

user20935175 05.01.2023 14:04

Другие вопросы по теме