首頁  >  問答  >  主體

如何顯示 php 頁面的載入程式?

我有一堆 .php 頁面,每個頁面都對應一個 html 網頁。完全處理和加載每個頁面大約需要一分鐘左右的時間。我想在頁面完全加載時向用戶顯示加載圖像。

我在邏輯上想到了一種方法,就像首先加載圖像並且主要內容保持隱藏,而.php 正在處理;一旦php 加載完成,它可以回顯一個元素,該元素充當JavaScript 的觸發器,將主要內容的顯示樣式從隱藏變更為區塊。但我無法執行它;因為我猜 apache 需要先加載 php,然後才能顯示任何輸出。

我看到的另一個選擇是更改整個頁面並使用 ajax 加載數據,但我有點懶得這樣做,因為這將涉及重寫所有 .php 程式碼。

我希望有人可以指導我解決我做錯的事情,或者是否有更有效的方法來完成這項任務。

P粉651109397P粉651109397257 天前383

全部回覆(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
  • 取消回覆