如何預加載網頁

Question

我使用HTML有多媒體演示，背景爲黑色，fullscrenned

，當我瀏覽周圍跳轉到不同的網頁，但在兩者之間，閃白和負載。

我可以在加載當前正在查看的頁面之前預加載這些網頁，因此下一個網頁的加載時間會減少，從而導致運行演示文稿的實際程序出現錯覺。

Answer 1

首先，這個'閃光燈'是正常的，網絡是如何工作的。所以，我不會詳細討論它。

您可以用不同的方式「預加載」頁面。一種方法是在頁面1上加載一個小的1px方塊iframe，加載頁面2.然後，當您轉到頁面2時，該頁面已經在緩存中。但請注意，您仍然可能會看到該Flash，因爲瀏覽器仍需重新繪製頁面。

另一個解決方案是使用AJAX。不用加載整個頁面，只需通過AJAX調用加載頁面內容。這樣的背景永遠不會改變，你永遠不會看到閃光燈。

但最簡單的解決方案可能是讓您的演示文稿開始一頁。有幾個CSS框架可以讓你用一個HTML文檔創建一個多頁面的頁面。這裏有一個：http://bartaz.github.io/impress.js/#/bored還有更多。只是谷歌「CSS演示框架」

Answer 2

有多種方法可以實現這一點。

jQuery的 Lightweight Jquery preloader

的Javascript Javascript Preloader

它最終會沿着這些路線的東西...

jQuery的

<script type="text/javascript">// <![CDATA[ 
$(window).load(function() { $("#spinner").fadeOut("slow"); }) 
// ]]></script> 

樣式CSS

#spinner { 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: 9999; 
background: url(your/image/path/loading.png) 50% 50% no-repeat #ede9df; 
} 

此外，如DA提到的，如果您不想要，您不需要加載單獨的頁面進行導航。這需要更多的工作，但是，您可以保持相同的頁面，並根據需要替換該頁面中的內容。