jquery - iframe contents not appearing on screen even when checking for onload event javascript -

we trying build html game in abobe edge being used animations , animations being inserted iframes. trying preload iframes before removing 'loading screen' users won't see blank iframes initially.

here code loading iframes.

we have global variable var middlebotloaded = false;

the following function tries dynamically populate iframe , once iframe has loaded , assigning 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; } 

we have method check if global variable has become true , if , removing loading screen.the method being called in interval of 500 milliseconds

settimeout(_haveallcharactersloaded,500);  function _haveallcharactersloaded() {     if(middlebotloaded == true)     {         $(joverlay).fadeout(800, function() {             $(joverlay).remove();         });     }     else     {         settimeout(_haveallcharactersloaded,500);     } } 

the problem after loading screen disappears , iframe contents take time come on screen .

we have observed duration depends on speed of net connection , , isn't using onload whole point of making sure contents have loaded.

is there other approach dealing problem.

thanks.

edit : have wait 2 days before can start bounty willing award can provide canonical answer question.

i have 2 answers here.

first, think should reconsider way you're coding game, unless it's static, turn based game relies upon animations (think pokemon.)

second, have suggestion try in fixing code.

first answer:

---

you asked if there other approach dealing problem.

my first reaction that, skip using iframes entirely. adobe edge may provide way craft animations, use in game engine find fighting against design of how adobe edge handles it's animations.

instead, recommend learning how use html5's canvas element. canvas built handle dynamically loaded content (such game engine generating.) can imagine event of having particle effect animation overlayed onto game character hit weapon. current approach, place in iframe? then, how ensure particle effect placed on correct location on object?

there many resources out there begin learning code need make true game engine in browser. recommend beginning learning how canvas works. if want animate using dom, learn 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

second answer:

---

i recommend looking variable scope of middlebotloaded. answer (set variable in parent window iframe) place look.

instead of using document.getelementbyid("botzmiddleidlesequence_iframe").attachevent("onload", function() { middlebotloaded = true; }); try using document.getelementbyid("botzmiddleidlesequence_iframe").attachevent("onload", function() { parent.middlebotloaded = true; });

alternatively, try along these lines:

onload event:

document.getelementbyid("botzmiddleidlesequence_iframe").attachevent("onload", function() { parent.middlebotloaded();}); 

function handle loading:

function middlebotloaded() {         $(joverlay).fadeout(800, function() {             $(joverlay).remove();         }); } 

it's better practice directly call event, rather polling variable changes using settimeout.