Ich habe eine Reihe von .php-Seiten, die jeweils einer HTML-Webseite entsprechen. Es dauert etwa eine Minute, bis jede Seite vollständig verarbeitet und geladen ist. Ich möchte dem Benutzer ein Ladebild anzeigen, wenn die Seite vollständig geladen ist.
Ich habe mir einen logischen Weg überlegt, wie zum Beispiel, dass das Bild zuerst geladen wird und der Hauptinhalt verborgen bleibt, während die PHP-Datei verarbeitet wird. Sobald die PHP-Datei geladen ist, kann sie ein Element wiedergeben, das als Auslöser für das JavaScript fungiert, das den Hauptinhalt hinzufügt Der Anzeigestil des Inhalts ändert sich von „Ausgeblendet“ zu „Blockiert“. Aber ich kann es nicht ausführen, weil ich vermute, dass Apache PHP laden muss, bevor es eine Ausgabe anzeigen kann.
Eine andere Option, die ich gesehen habe, war, die gesamte Seite zu ändern und Ajax zum Laden der Daten zu verwenden, aber ich bin etwas faul, das zu tun, da das das Neuschreiben des gesamten .php-Codes erfordern würde.
Ich hoffe, dass mir jemand erklären kann, was ich falsch mache oder ob es einen effizienteren Weg gibt, diese Aufgabe zu erledigen.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
一种策略是使用 cookie 和中间页面。将所有请求重定向到没有某个cookie的中间页面，在中间页面我们设置cookie。
使用 apache htaccess 或其他服务器中的等效项，无需修改应用程序的页面。
在 htaccess 中检查 cookie（例如已经加载）是否存在，如果不存在，则重定向到“loading.html”，在“loading.html”中设置 hasloading=true，然后进行重定向到原始网址。
使用 javascript 在“loading.html”中进行重定向非常重要，因为使用 HTTP 重定向您将无法获得预期的结果。
在“loading.html”中显示正在加载的图像，您必须设置cookie hasloading=true，然后使用您重定向到原始URL的onload事件，在onload中您会做一个小的延迟或图像（正在加载） ) 在某些浏览器中将被冻结而不移动：
<script> window.onload = function() { setTimeout( function() { location.replace($ORIGIAL_URL.split('#')[0]); }, 60 ); }; </script>随着 cookie 过期，您可以根据您的需要使“loading.html”在几天、几小时或几分钟内不会重新加载。另一种选择是为每个 URL 设置一个 cookie。
我在几个网站上都有类似的实现。
编辑：
为了说明策略，而不是实现，在这个简单的示例中，我们不使用 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 中我怀疑它在本地工作。