Thursday, August 15, 2013

How to hide White Flash while iFrame Loads

Here solution to prevent White Flash when iframes loads.

Solution 1 (Little bad):

<iframe style="visibility:hidden;" onload=" = 'visible';" src="../core/inline-frames.html" > </iframe>

The reason this is bad is that the CSS will hide the iframe no matter what and users with JavaScript turned off will never see that iframe.

Solution 2 (Good):

// Prevent variables from being global      
(function () {

1. Inject CSS which makes iframe invisible

var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[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() {


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.
Disqus Comments