加載HTML5

做到這一點的一種方式，gmail如何做到這一點，例如通過漸進式增強。首先加載核心頁面元素，然後使用JavaScript（jQuery），使用簡單的ajax get請求加載較重的元素，該請求僅在dom準備就緒時觸發。它將允許核心內容快速加載，然後在基本界面出現後加載其他內容。揉搓是無障礙的，如果用戶沒有打開js，你應該（但不必）爲每個人提供數據 - 即使這是一個單獨的html頁面。 http://api.jquery.com/jQuery.get/ – picus 2011-02-16 20:13:32

您可以在網頁的開頭做一個大<div>，然後在load事件使用Javascript或在<body>結束使用非法<style>塊隱藏它。

來源

2011-02-16 18:46:13 SLaks

當所有的圖片資源都被載入時，你已經準備好了。定義覆蓋整個頁面的全屏div。在這個div中，顯示例如加載微調器動畫GIF和你想要什麼文本。

<html> 
    <head> .. </head> 
    <body> 
     <div id="loader"> .. </div> 
     <div id="content" style="display:none"> .. </div> 
     <script> .. </script> 
    </body> 
</html>

在腳本中預加載所有圖像。這確保了它們在需要時處於緩存中。

<script> 
var loadc = 0; 
function _preload(path) { 
    var image = new Image; 
    image.src = path; 
    image.addEventListener('load', function() { 
     loadc++; 
     if (loadc == images.count) { 
      $("#loader").hide(); 
      $("#hide").show(); 
     } 
     // update here progress counter on loading div 
    }; 
} 
var images = [ '/image/some.png', '/foo/bar.png' ] 
$(document).ready(function() { 
    for (var i = 0 ; i < images.length; i++) _preload(images[i]); 
}); 
</script>

您需要images陣列來定義您希望在顯示內容的div要準備好所有的資產，這包括來自CSS和DOM和可能的動態DOM提到的東西。您可以對其他資產使用相同的方法，例如audio和json。

來源

2011-11-26 11:15:42

回答

相關問題