Dynamically injecting an <object> tag causes white flash

Question

I'm trying to dynamically insert some HTML/JS/CSS on command. (holding off this code for page loading speed). I found a neat way of doing this, inserting a HTML5 tag pointing at the html- file which in turn references the css and js, like so:

function toggleObject() { 
var object = document.getElementById('myObject'); 
  if (!object) { 
    var e = document.createElement('object'); 
    e.setAttribute('data', 'testing.html'); 
    e.setAttribute('id', 'myObject'); 
    // inject data into DOM 
    document.getElementsByTagName('body')[0].appendChild(e); 
 } else { 

    document.getElementsByTagName('body')[0].removeChild(object); 
}} 

The only problem with this is that upon inserting the tag the object (height, width and position as defined by css) flashes white before loading which isn't very attractive.

Is there a remedy for the ugly white flash?

Note! I experimented with toggling the visibility property of the object and firing up a loader div, but I can't figure what event would be able to call off the loader and turn visibility back on when the object is fully injected in the DOM. In end I settled for just a timeout of 1 sec, which feels less than optimal..

Answer 1

Try setting the visibility to hidden when you create the OBJECT Element and then setting it to visible once it has been appended to its parent Node.