0

我们正在尝试构建一个abobe edge用于动画的 HTML 游戏，并且这些动画被插入到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;
}

我们有一个方法来检查全局变量是否已经变成，如果是，我们正在移除加载屏幕。该方法在500 毫秒内true被调用interval

setTimeout(_haveAllCharactersLoaded,500);

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

问题是即使加载屏幕消失后，iframe内容也需要一段时间才能出现在屏幕上。

我们观察到持续时间取决于网络连接的速度，但是，并没有使用onload确保内容已加载的全部意义。

有没有其他方法可以解决这个问题。

谢谢。

编辑：我必须等待两天才能开始赏金，但我愿意将其奖励给任何可以为该问题提供规范答案的人。

4

1 回答 1

2

我这里有两个答案。

首先，我认为您应该重新考虑编写此游戏的方式，除非它是仅依赖动画的静态回合制游戏（想想 Pokemon。）

其次，我建议您尝试修复您的代码。

第一个答案：

你问是否有任何其他方法来处理这个问题。

我对此的第一反应是完全跳过使用 iFrame。Adobe Edge 可能为您提供了一种制作动画的好方法，但对于在游戏引擎中使用，您只会发现自己在与 Adob​​e Edge 处理动画的设计作斗争。

相反，我建议学习如何使用 HTML5 的 canvas 元素。Canvas 旨在处理动态加载的内容（例如您的游戏引擎将生成的内容。）我只能想象当游戏角色被武器击中时将粒子效果动画叠加到游戏角色上的事件。使用您当前的方法，您会将其放在 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 的变量范围。这个答案（在 iframe 的父窗口中设置变量）将是一个很好的地方。

而不是使用document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { middleBotLoaded = true; }); 尝试使用document.getElementById("botzmiddleidlesequence_iframe").attachEvent("onload", function() { parent.middleBotLoaded = true; });

或者，尝试以下方式：

加载事件：

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

处理加载的函数：

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

直接调用事件而不是使用 setTimeout 轮询变量更改是更好的做法。

于 2013-07-17T13:49:03.217 回答