HTML5遊戲的客戶端呈現HTML資源的加載策略

我正在使用jQuery中除了一些其他js文件，css文件（圖像文件，在css中）的HTML5 facebook遊戲文件），字體文件，聲音文件和屏幕（html div在單獨的文件中）。HTML5遊戲的客戶端呈現HTML資源的加載策略

我想要一個加載腳本，因爲資源的大小大約爲1 MB。有兩種選擇;

第一個是寫一個資源加載器，並以正確的順序加載所有東西，這真的很痛苦。

第二個是在啓動時首先有一個簡單的加載屏幕，在加載這個頁面時開始加載實際的html（帶有js，css和everyting）並將加載過程交給瀏覽器客戶。

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
    function iframeIsLoaded() 
    { 
     ... 
    } 
</script> 
</head> 
<body> 
    <div id="loadingScreen" class="..."> <!-- iframe will be under this div --> 
    ... 
    </div> 
    <iframe ...> 
    </iframe> 
...

明顯的第二種選擇是好得多，但我沒有線索如何做到這一點。如上所示，我可以在加載屏幕div下使用iframe，但有沒有辦法從iframe向上面的div發送消息？

我也對其他解決方案開放！

來源

2013-11-27 hevi

您可以使用iframe.load事件來完成此操作。

你想要做的是在頁面加載時隱藏iframe並顯示加載屏幕，然後你想等到內容被加載，然後顯示框架並隱藏加載屏幕。

（這個例子假定使用iFrame的src屬性加載內容）

純JavaScript：Example JSFiddle

var frame = document.getElementById('iframeID'); 
var loading = document.getElementById('loadingScreen'); 

frame.style.display = 'none';//Originally hide the frame 
loading.style.display = 'block';//Originally show the Loading Screen 

frame.src = 'http://www.bing.com';//Set the src attribute 

frame.onload = function() { 
    frame.style.display = 'block';//Show the frame after it is loaded 
    loading.style.display = 'none';//Hide the loading screen 
}

編輯：（刪除jQuery的實施例，並添加了新的例子基於評論）

這是一個新的例子，檢查子頁面的變量done檢查它是否設置爲true。

警告這個例子已不是由於跨域腳本安全工作的潛力，這應該只，如果你是100％，這兩個網頁位於同一個域

子頁面中使用：

var done = false; 

    setTimeout(function() { 
     done = true; 
    }, 10000);

父頁：（腳本需要的HTML後/將身體標記（）結束前）

<div> 
    <div id="loading"> 
     Loading... 
    </div> 
    <iframe id="iframeID"></iframe> 
</div> 
<script type="text/javascript"> 
    var frame = document.getElementById('iframeID'); 
    var loading = document.getElementById('loading'); 

    frame.style.display = 'none'; //Originally hide the frame 
    loading.style.display = 'block'; //Originally show the Loading Screen 

    frame.src = 'Test2.aspx'; //Set the src attribute 

    frame.onload = function() { 
     console.log('Loaded Frame'); 
    } 

    var $interval = setInterval(CheckFrameDone, 500); 

    function CheckFrameDone() { 
     var done = frame.contentWindow.done; 
     console.log(done); 
     if (done) { 
      console.log('Frame is Finished Loading'); 
      frame.style.display = 'block'; 
      loading.style.display = 'none'; 
      clearInterval($interval); 
     } else { 
      console.log('Still Waiting...'); 
     } 
    } 
</script>

在第二個例子中，您會注意到，每隔500毫秒，父頁面將檢查子頁面的done值，如果它是true，它將顯示幀並清除間隔。否則它將繼續檢查。

來源

2013-11-27 08:57:47 Nunners

你的答案部分正確。我也需要動態加載的資源來通知父母。舉一個例子，我需要確定瀏覽器類型並相應地加載mp3/ogg，這可以通過javascript完成。因此，我需要處理iframe中的加載處理程序並加載動態資源，如音頻文件，然後才發送加載的信號。 – hevi

當你說'在iframe中'你只是指iframe鏈接到的頁面？如果是這樣，你可以嘗試在父頁面上運行一個'setInterval'來檢查子變量是否被設置爲true，也就是說，只有在完成加載和完成時，Child設置爲'var done = true;' == true'顯示框架。 – Nunners

@hevi請參閱我的編輯答案與新的例子。 – Nunners

HTML5遊戲的客戶端呈現HTML資源的加載策略

回答

相關問題