Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    iFrame white Flash

    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/dynamici...tentglider.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.

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    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.,
    PHP Code:
    <iframe style="background:#000000;" src="inline.html" width="770" height="508" frameborder="0" scrolling="no"></iframe
    or
    PHP Code:
    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:
    PHP Code:
    <iframe id="iframeSlideshow" src="inline.html" width="770" height="508" frameborder="0" scrolling="no"></iframe
    CSS:
    PHP Code:
    #iframeSlideshow {
        
    display:none;

    Then add the following somewhere in the HTML:
    PHP Code:
    <script type="text/javascript">
        
    window.onload = function(){document.getElementById('iframeSlideshow').style.display 'block';};
    </script> 
    Or maybe this would work better:
    PHP Code:
    <iframe style="display:none;" onload="this.style.display = 'block';" src="inline.html" width="770" height="508" frameborder="0" scrolling="no"></iframe
    Or:
    PHP Code:
    <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:
    PHP Code:
    <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.
    Last edited by tfburges; 09-27-2010 at 05:57 PM.

  • #3
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick response. I'll give those suggestions a try. I think a solution is in there somewhere.

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Here I find a good solution that is working. Do try it:
    http://swsharinginfo.blogspot.com/20...sue-while.html


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •