Here solution to prevent White Flash when iframes loads.
Solution 1 (Little bad):
Solution 2 (Good):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.
// 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 = '­<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.