View Full Version : iFrame white Flash

Sep 27th, 2010, 05:17 PM
I know there have been several posts over the years dealing with the issue of the white flash when a page loads using an iframe. I'm using an iframe on my homepage to load a slideshow of images, using DynamicDrive's Content Glider. (http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm)

Unfortunately, if I use the piece of code that hides the iframe until the entire page loads, it makes for a very long delay in the page load. I'm a novice CSS/HTML coder, but know enough to get by. I was wondering, is there an alternative solution available, perhaps using CSS to position the slideshow on my page? Here's the link to my live site: http://www.davidhartman.info

Or, is there an alternative way to avoid the white flash without having to wait until the entire iframe loads?

Thanks in advance.

Sep 27th, 2010, 06:54 PM
I'm using firefox and I'm not seeing any white flash. Wait... just tested opera and I see what you're talking about. Have you tried setting the iframe background to #000000?


<iframe style="background:#000000;" src="inline.html" width="770" height="508" frameborder="0" scrolling="no"></iframe>


iframe {

If that doesn't work, I don't see why waiting for the page to load to display the iframe would cause a "very long delay." You should be able to give the iframe an ID and set its display to none (and it would still load).

<iframe id="iframeSlideshow" src="inline.html" width="770" height="508" frameborder="0" scrolling="no"></iframe>

#iframeSlideshow {
Then add the following somewhere in the HTML:

<script type="text/javascript">
window.onload = function(){document.getElementById('iframeSlideshow').style.display = 'block';};

Or maybe this would work better:

<iframe style="display:none;" onload="this.style.display = 'block';" src="inline.html" width="770" height="508" frameborder="0" scrolling="no"></iframe>

<iframe onload="setTimeout(function(){this.style.display = 'block';}, 2000);" src="inline.html" width="770" height="508" frameborder="0" scrolling="no"></iframe>

Or worst case, just add a slight delay and don't worry about onload:

<script type="text/javascript">
setTimeout(function(){document.getElementById('iframeSlideshow').style.display = 'block';}, 5000);

I haven't tested any of this code but the concept is there.

Sep 27th, 2010, 08:02 PM
Thanks for the quick response. I'll give those suggestions a try. I think a solution is in there somewhere.

Mar 31st, 2012, 04:15 PM
Here I find a good solution that is working. Do try it: