Get Rid of White Flash when iframe Loads

Hides iframe until fully loaded.

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


  1. Kartlos Tchavelachvili
    Permalink to comment#

    wow, cool

  2. Sunny Singh
    Permalink to comment#

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

  3. Dan
    Permalink to comment#

    Thankee Jesus!!!!

  4. sonja
    Permalink to comment#

    thank YOU!!!!

  5. gabi
    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… ???

  6. The Infinite Loop Blog

    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”);

  7. R


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

    Many thanks

  8. alf
    Permalink to comment#

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

  9. 135design
    Permalink to comment#

    Any W3C valid solution?

  10. Paul

    Love you. Thats just simple genius

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

  12. 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"

  13. 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=” = \’visible\’;” scrolling=”‘+e.scrolling+'” src=”‘+d.href+'”

  14. 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”

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

  16. SW
    Permalink to comment#
  17. rttmax
    Permalink to comment#

    thx. so easy…

  18. Mario
    Permalink to comment#

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

  19. migue
    Permalink to comment#

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

  20. Avi
    Permalink to comment#

    Thanks!!! You helped me a lot.

  21. Trung
    Permalink to comment#

    Awesome! Thanks a ton!

  22. antyal
    Permalink to comment#

    Thank you! This was very helpful.

  23. Abaxsoft
    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?

  24. Brian
    Permalink to comment#

    Thank you!

  25. Brandon

    Perfect. Thank you!

  26. Booki
    Permalink to comment#

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

  27. Abhigyan
    Permalink to comment#

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

  28. AJ Boet
    Permalink to comment#

    Perfect! Short, Simple.. Just Great!

  29. Maria
    Permalink to comment#

    Thanks so much for sharing this!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.