PDA

View Full Version : iFrame white Flash



davidh1
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.

tfburges
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?

i.e.,


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

or


iframe {
background:#000000;
}


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).
HTML:

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


#iframeSlideshow {
display:none;
}
Then add the following somewhere in the HTML:

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

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>
Or:

<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);
</script>

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

davidh1
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.

sagarvwagh
Mar 31st, 2012, 04:15 PM
Here I find a good solution that is working. Do try it:
http://swsharinginfo.blogspot.com/2011/11/avoid-iframe-white-flash-issue-while.html