我有一堆 .php 頁面,每個頁面都對應(yīng)一個 html 網(wǎng)頁。完全處理和加載每個頁面大約需要一分鐘左右的時間。我想在頁面完全加載時向用戶顯示加載圖像。
我在邏輯上想到了一種方法,就像首先加載圖像并且主要內(nèi)容保持隱藏,而 .php 正在處理;一旦 php 加載完成,它可以回顯一個元素,該元素充當 JavaScript 的觸發(fā)器,將主要內(nèi)容的顯示樣式從隱藏更改為塊。但我無法執(zhí)行它;因為我猜 apache 需要先加載 php,然后才能顯示任何輸出。
我看到的另一個選擇是更改整個頁面并使用 ajax 加載數(shù)據(jù),但我有點懶這樣做,因為這將涉及重寫所有 .php 代碼。
我希望有人可以指導(dǎo)我解決我做錯的事情,或者是否有更有效的方法來完成這項任務(wù)。
一種策略是使用 cookie 和中間頁面。將所有請求重定向到?jīng)]有某個cookie的中間頁面,在中間頁面我們設(shè)置cookie。
使用 apache htaccess 或其他服務(wù)器中的等效項,無需修改應(yīng)用程序的頁面。
在 htaccess 中檢查 cookie(例如已經(jīng)加載)是否存在,如果不存在,則重定向到“l(fā)oading.html”,在“l(fā)oading.html”中設(shè)置 hasloading=true,然后進行重定向到原始網(wǎng)址。
使用 javascript 在“l(fā)oading.html”中進行重定向非常重要,因為使用 HTTP 重定向您將無法獲得預(yù)期的結(jié)果。
在“l(fā)oading.html”中顯示正在加載的圖像,您必須設(shè)置cookie hasloading=true,然后使用您重定向到原始URL的onload事件,在onload中您會做一個小的延遲或圖像(正在加載) ) 在某些瀏覽器中將被凍結(jié)而不移動:
<script> window.onload = function() { setTimeout( function() { location.replace($ORIGIAL_URL.split('#')[0]); }, 60 ); }; </script>
隨著 cookie 過期,您可以根據(jù)您的需要使“l(fā)oading.html”在幾天、幾小時或幾分鐘內(nèi)不會重新加載。另一種選擇是為每個 URL 設(shè)置一個 cookie。
我在幾個網(wǎng)站上都有類似的實現(xiàn)。
編輯:
為了說明策略,而不是實現(xiàn),在這個簡單的示例中,我們不使用 htaccess,并在加載內(nèi)容之前在內(nèi)容頁面上進行第一次重定向。
另存為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 中我懷疑它在本地工作。