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="this.style.visibility = '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] ||
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.
Disqus Comments