首页  >  问答  >  正文

如何显示 php 页面的加载程序?

我有一堆 .php 页面,每个页面都对应一个 html 网页。完全处理和加载每个页面大约需要一分钟左右的时间。我想在页面完全加载时向用户显示加载图像。

我在逻辑上想到了一种方法,就像首先加载图像并且主要内容保持隐藏,而 .php 正在处理;一旦 php 加载完成,它可以回显一个元素,该元素充当 JavaScript 的触发器,将主要内容的显示样式从隐藏更改为块。但我无法执行它;因为我猜 apache 需要先加载 php,然后才能显示任何输出。

我看到的另一个选择是更改整个页面并使用 ajax 加载数据,但我有点懒这样做,因为这将涉及重写所有 .php 代码。

我希望有人可以指导我解决我做错的事情,或者是否有更有效的方法来完成这项任务。

P粉651109397P粉651109397306 天前433

全部回复(1)我来回复

  • P粉558478150

    P粉5584781502024-01-11 00:13:41

    一种策略是使用 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 中我怀疑它在本地工作。

    回复
    0
  • 取消回复