即使檢查onload事件，iframe內容也不會出現在屏幕上javascript

Question

我們正在嘗試構建一個HTML動畫，其中abobe edge正在用於動畫，並且正在將這些動畫插入到iframes中。在刪除「加載屏幕」之前，我們正試圖預加載iframes，以便用戶最初不會看到空白的iframe。

下面是加載iframes的代碼。

我們有一個全局變量var middleBotLoaded = false;

下面的函數試圖動態填充iframe，一旦iframe加載，我們正在分配variable到true

function _trackIFrameLoading() 
{ 
    if (document.getElementById("botzmiddleidlesequence_iframe").attachEvent) 
    { 
     document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { middleBotLoaded = true; }); 
    } 
    else 
    { 
     document.getElementById("botzmiddleidlesequence_iframe").onload = function() { middleBotLoaded = true; }; 
    } 


    document.getElementById("botzmiddleidlesequence_iframe").src = APP_BASE_URL + "blitzbotzidlesequence/blitzbotz/"+middleBotzId; 
} 

我們有一個方法來檢查如果全局變量已成爲true如果是這樣，我們要刪除的加載屏幕的屏幕，方法被稱爲500 interval一毫秒

setTimeout(_haveAllCharactersLoaded,500); 

function _haveAllCharactersLoaded() 
{ 
    if(middleBotLoaded == true) 
    { 
     $(jOverlay).fadeOut(800, function() { 
      $(jOverlay).remove(); 
     }); 
    } 
    else 
    { 
     setTimeout(_haveAllCharactersLoaded,500); 
    } 
} 

問題是，即使加載屏幕消失後，iframe內容也需要時間才能顯示在屏幕上。

我們觀察到持續時間取決於網絡連接的速度，但是沒有使用onload確保內容已加載的整點。

是否有處理這個問題的任何其他方法。

謝謝。

編輯：我必須等兩天才能開始賞金，但我願意將它授予任何能夠提供問題標準答案的人。

Answer 1

我這裏有兩個答案。

首先，我認爲你應該重新考慮你的編碼這個遊戲的方式，除非它是一個靜態的，回合制遊戲，只有依靠動畫（認爲口袋妖怪）

其次，我對你的建議嘗試修復您的代碼。

第一個答案：

---

你問是否有任何其他的方法來處理這個問題。

我到該第一反應，將使用iFrame中完全跳過。 Adobe Edge可能爲您提供製作動畫的好方法，但在遊戲引擎中使用時，您只會發現自己正在與Adobe Edge處理其動畫的設計相抗衡。

相反，我建議學習如何使用HTML5的畫布元素。畫布是爲了處理動態加載的內容而建立的（比如你的遊戲引擎將會產生）。我只能想象當粒子效果動畫被武器擊中時，它會疊加到遊戲角色上。用你目前的方法，你會把它放在一個iFrame中嗎？那麼，你如何確保將這種粒子效應放在物體上的正確位置？

有很多資源，在那裏幫助你開始學習，你需要做一個真正的遊戲引擎的瀏覽器的代碼。我會推薦學習Canvas如何工作。如果您想使用DOM進行動畫製作，請了解requestAnimationFrame。

http://creativejs.com/

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial

第二個答案：

---

我會建議考慮您的middleBotLoaded的變量範圍。這個答案（Set variable in parent window from iframe）將是尋找一個好地方。

而不是使用document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { middleBotLoaded = true; }); 嘗試使用​​

或者，嘗試沿着這些路線的東西：

onLoad事件：

document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { parent.middleBotLoaded();}); 

函數來處理負載：

function middleBotLoaded() 
{ 
     $(jOverlay).fadeOut(800, function() { 
      $(jOverlay).remove(); 
     }); 
} 

直接調用事件是一種更好的做法，而不是使用setTimeout輪詢變量更改。