Showing iFrame only after its source content has been completely loaded

Question

I have a iFrame on my page thats display style is none. I have a javascript function to set the source and then set the display to block. The problem is that the iframe shows up before the content of it is loaded and thus I get a flickering effect. It goes white first and then displays the content. So I need to set the source, and when done loading all content of its source, only set its display style.

CSS & Javascript

.ShowMe{display:block;}

function(url)
{
document.getElementById('myIFrame').src = url;
document.getElementById('myIFrame').className = ShowMe;
}

Answer 1

It's simple as that:

<iframe onload="this.style.opacity=1;" style="opacity:0;border:none;