Grow your CSS skills. Land your dream job.

Last updated on:

Get Rid of White Flash when iframe Loads

Hides iframe until fully loaded.

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="../examples/inlineframes1.html" > </iframe>

Comments

  1. Permalink to comment#

    Exactly what I needed! Didn’t know this was possible.

  2. Dan
    Permalink to comment#

    Thankee Jesus!!!!

  3. sonja
    Permalink to comment#

    thank YOU!!!!

  4. Permalink to comment#

    Why doesn’t it work for me? I have 3 pages with iframes: archive, current and black white series

    When I look in IE 7 or 8 the white box still flashes… ???

  5. Your code will keep the iframe hidden if javascript is disabled. This one will only hide/show the frame if javascript is enabled.

    //iframe flashes white bugfix with jquery
    //set visibility to ‘hidden’ in the actual page
    $(“iframe”).load(function() {
    $(this).css(“visibility”, “visible”);
    });
    $(“iframe”).ready(function() {
    $(this).css(“visibility”, “hidden”);
    });

  6. R

    Hi,

    Is there any chance you could tell me how/where would I integrate this in Facybox?

    Many thanks

  7. Permalink to comment#

    works fine !! thx a lot – greetings from austria – jodeldijodeldiö

  8. Permalink to comment#

    Any W3C valid solution?

  9. Paul

    Love you. Thats just simple genius

  10. JDPaulsen
    Permalink to comment#

    It does work, however it works only once. After the iFrame-constructed page loads, if you click on a link that it’s supposed to load another page on said iFrame, and because said iFrame is already loaded and hence visible, the white Flash is back.

  11. Kapy
    Permalink to comment#

    struggles with this problem in fancybox for ages,
    go to the fancy box jacked.js

    look for first occurance of “<iframe"

  12. Kapy
    Permalink to comment#

    wont let me post full html:
    id=”fancybox-frame” name=”fancybox-frame’+(new Date).getTime()+'” frameborder=”0″ hspace=”0″ allowtransparency=”true” style=”visibility:hidden;” onload=”this.style.visibility = \’visible\';” scrolling=”‘+e.scrolling+'” src=”‘+d.href+'”

  13. Kapy
    Permalink to comment#

    You need to do 3 things really:
    make iframe invisible, in css “visible:hidden”
    make iframe allow transparency, allowtransparency=”true”
    make the body it displays have a transparent background, “background-color:transparent”

  14. Pest
    Permalink to comment#

    Thank you so much! This works very well! It’s ridiculous how Internet Explorer 9 STILL shows a white background for iframes during page load! Unbelievable.

  15. rttmax
    Permalink to comment#

    thx. so easy…

  16. Permalink to comment#

    Thanks a million. I wasted hours trying to figure this out. A simple solution that works.

  17. migue
    Permalink to comment#

    Thanks!!! I spend almost 2 hours trying to figure out by myself but this helps so much!! thanks

  18. Avi
    Permalink to comment#

    Thanks!!! You helped me a lot.

  19. Trung
    Permalink to comment#

    Awesome! Thanks a ton!

  20. antyal
    Permalink to comment#

    Thank you! This was very helpful.

  21. Permalink to comment#

    Thanks for the code
    i was just going through comment where someone suggested jquery alternative saying that javascript needs to be enable for you solution
    i would like to know how are you going to use jquery is javascript is disabled
    also does anyone has any solution to load iframe inside flash ?
    i am looking for something to save my page from stealing

    • Alex
      Permalink to comment#

      because the hiding is also done with jquery. that means if there is no javascript, it is never hidden and never shown its just “there” with a white flash. however, coding for people without javascript is no longer a valid thing, everyone has javascript enabled but the most paranoid people, and those people are not people u want viewing your site unless u run some kind of conspiracy site LOL. yknow?

  22. Brian
    Permalink to comment#

    Thank you!

  23. Brandon

    Perfect. Thank you!

  24. Booki
    Permalink to comment#

    YOU ARE MY HERO!!!!! Thanks a lot, i was searching tooo Long to get rid of this problem! ;-)

  25. Abhigyan
    Permalink to comment#

    Is there any way to load iframe on a higher priority even before loading the css .. ?

  26. AJ Boet
    Permalink to comment#

    Perfect! Short, Simple.. Just Great!

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".