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