Code Snippet

Home » Code Snippets » HTML » Get Rid of White Flash when iframe Loads

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>
Much more robust and progressive method here.

Subscribe to The Thread

  1. Kartlos Tchavelachvili

    wow, cool

    Reply ↓
  2. Sunny Singh

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

    Reply ↓
  3. Dan

    Thankee Jesus!!!!

    Reply ↓
  4. sonja

    thank YOU!!!!

    Reply ↓
  5. gabi

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

    Reply ↓
  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”);
    });

    Reply ↓
  7. R

    Hi,

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

    Many thanks

    Reply ↓
  8. alf

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

    Reply ↓
  9. 135design

    Any W3C valid solution?

    Reply ↓
  10. Paul

    Love you. Thats just simple genius

    Reply ↓
  11. JDPaulsen

    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.

    Reply ↓
  12. Kapy

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

    look for first occurance of “<iframe"

    Reply ↓
  13. Kapy

    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+’”

    Reply ↓
  14. Kapy

    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”

    Reply ↓
  15. Pest

    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.

    Reply ↓
  16. SW

    Here I find another good solution that is working:
    http://swsharinginfo.blogspot.com/2011/11/avoid-iframe-white-flash-issue-while.html

    Reply ↓
  17. rttmax

    thx. so easy…

    Reply ↓
  18. Mario

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

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~