Prevent White Flash While iFrame Loads

Problem

<!– NO! Bad! –>

{iframe style=”visibility:hidden;” onload=”this.style.visibility = ‘visible’;” src=”../examples/inlineframes1.html” } {/iframe}

(since WP dont allow me top place an iframe with <> :p, make sure to replace { } with <>)

//———————————————————————————————————————–

Solution

// Prevent variables from being global 

(function () {

/*
1. Inject CSS which makes iframe invisible
*/

var div = document.createElement(‘div’),
ref = document.getElementsByTagName(‘base’)[0] ||
document.getElementsByTagName(‘script’)[0];

div.innerHTML = ‘&shy;<style> iframe { visibility: hidden; } </style>’;

ref.parentNode.insertBefore(div, ref);
/*
2. When window loads, remove that CSS,
making iframe visible again
*/

window.onload = function() {
div.parentNode.removeChild(div);
}

})();

Just include that on any page (in the <head>) with the white flash problem and it will be solved. Just note that we’re using window.onload here, so if your page also uses that somewhere, combine them.

How it Works

It inserts some CSS on the page (right away) which makes all iframes invisible. You can’t see a white flash on an iframe that’s not there..

When the window is done loading (which means iframes are done loading too), this CSS is removed, which makes the iframes visible again .Browsers Affected At the time of this writing, I’m able to replicate the problem in Chrome 11 and Safari 5 (so essentially a WebKit issue). Current Firefox, Opera, and IE are fine.

What About… other stuff?

You can put the  allowtransparency=”true”  attribute on the iframe. You can set the iframe’s background to transparent with CSS. You can make sure the background on the source document matches the background of the parent page. None of that stuff works. This works. Well… it works for users with JavaScript turned on, anyway. 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s