是否可以在呈現之前加載整個網頁？

Question

我有一個網頁每隔幾秒自動重新加載一次，並顯示一個不同的隨機圖像。然而，當它重新加載時，第二秒會出現空白頁面，然後圖像緩慢加載。我希望繼續顯示原始頁面，直到下一頁加載到瀏覽器的內存中，然後一次顯示它，以便它看起來像無縫幻燈片。有沒有辦法做到這一點？

Answer 1

回到黑暗的舊時代（2002年），我通過一個隱形的iframe來處理這種情況。我會將內容加載到body.onload（）方法中，然後將內容放到需要的地方。

Pre-AJAX這是一個很好的解決方案。

我只是提到了完整性。我不推薦它，但值得注意的是，Ajax不是先決條件。

這就是說，在你只需循環圖像的情況下，使用Ajax或類似jQuery循環插件的動態循環瀏覽圖像，而無需重新加載整個頁面。

Answer 2

是改變圖像的唯一的東西？如果是這樣的話，使用類似jQuery的循環插件而不是重新加載整個頁面可能更有效。

http://malsup.com/jquery/cycle/

這裏是JS需要，如果你使用jQuery的 -

說，這是你的HTML：

<div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div> 

這裏將是需要jQuery的：

$(function(){ 
$('div.pics').cycle(); 
}); 

無需擔心不同的瀏覽器 - 完成跨瀏覽器兼容吳春明。

Answer 3

如果您創建了兩個在圖像區域重疊的div，您可以通過AJAX加載一個帶有新圖像的div，隱藏當前div並顯示新圖像，並且不會刷新網頁導致「不良轉型」。然後重複這個過程。

如果只有少量的圖像，並且它們總是以相同的順序顯示，那麼您可以簡單地創建一個動畫GIF。

Answer 4

如果你只是改變圖像，那麼我建議不要重新加載頁面，並使用一些JavaScript來改變圖像。這可能是jquery循環插件爲你做的。

無論如何，這裏有一個簡單的例子

<img id="myImage" src="http://someserver/1.jpg" /> 

<script language="javascript"> 
var imageList = ["2.jpg", "3.jpg", "4.jpg"]; 
var listIndex = 0; 

function changeImage(){ 
    document.getElementById('myImage').src = imageList[listIndex++]; 
    if(listIndex > imageList.length) 
     listIndex = 0; // cycle around again. 

    setTimeout(changeImage, 5000); 
}; 

setTimeout(changeImage, 5000); 
</script> 

這會改變每5秒的圖像源。不幸的是，瀏覽器會逐步下載圖像，因此在下載新圖像時，您會收到幾秒鐘的「閃爍」（或者可能是空白區域）。

爲了解決這個問題，您可以「預加載」圖像。這是通過創建一個不顯示在屏幕上的新臨時圖像來完成的。一旦圖像加載完畢，您將真實圖像設置爲與「預加載」相同的來源，因此瀏覽器會將圖像從其緩存中取出，並立即顯示。你會做這樣的：

<img id="myImage" src="http://someserver/1.jpg" /> 

<script language="javascript"> 
var imageList = ["2.jpg", "3.jpg", "4.jpg"]; 
var listIndex = 0; 
var preloadImage = new Image(); 

// when the fake image finishes loading, change the real image 
function changeImage(){ 
    document.getElementById('myImage').src = preloadImage.src; 
    setTimeout(preChangeImage, 5000); 
}; 
preloadImage.onload = changeImage; 

function preChangeImage(){ 
    // tell our fake image to change it's source 
    preloadImage.src = imageList[listIndex++]; 
    if(listIndex > imageList.length) 
     listIndex = 0; // cycle around again. 
}; 

setTimeout(preChangeImage, 5000); 
</script> 

這是相當複雜的，但我會離開它作爲一個練習，讀者把所有的拼在一起（希望說：「啊哈！」）:-)