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. User Avatar
    Kartlos Tchavelachvili
    Permalink to comment#

    wow, cool

  2. User Avatar
    Sunny Singh
    Permalink to comment#

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

  3. User Avatar
    Dan
    Permalink to comment#

    Thankee Jesus!!!!

  4. User Avatar
    sonja
    Permalink to comment#

    thank YOU!!!!

  5. User Avatar
    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. User Avatar
    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. User Avatar
    R

    Hi,

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

    Many thanks

  8. User Avatar
    alf
    Permalink to comment#

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

  9. User Avatar
    135design
    Permalink to comment#

    Any W3C valid solution?

  10. User Avatar
    Paul

    Love you. Thats just simple genius

  11. User Avatar
    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. User Avatar
    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. User Avatar
    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+'”

  14. User Avatar
    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. User Avatar
    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. User Avatar
    SW
    Permalink to comment#
  17. User Avatar
    rttmax
    Permalink to comment#

    thx. so easy…

  18. User Avatar
    Mario
    Permalink to comment#

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

  19. User Avatar
    migue
    Permalink to comment#

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

  20. User Avatar
    Avi
    Permalink to comment#

    Thanks!!! You helped me a lot.

  21. User Avatar
    Trung
    Permalink to comment#

    Awesome! Thanks a ton!

  22. User Avatar
    antyal
    Permalink to comment#

    Thank you! This was very helpful.

  23. User Avatar
    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

    • User Avatar
      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. User Avatar
    Brian
    Permalink to comment#

    Thank you!

  25. User Avatar
    Brandon

    Perfect. Thank you!

  26. User Avatar
    Booki
    Permalink to comment#

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

  27. User Avatar
    Abhigyan
    Permalink to comment#

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

    • User Avatar
      pankaj
      Permalink to comment#

      hello sir , have u find the solution ???

      I need this the also for my site i want to hide some divs from that iframe then show the content of iframe

      My code is

      function RemoveExtraDiv(){

                  //Hides the breadcrumb from the iframe
              $("#IPFrame").contents().find("#header").css({"display": "none"});
              $("#IPFrame").contents().find("#wpadminbar").css({"display": "none"});
              $("#IPFrame").contents().find(".footer_container").css({"display": "none"});
              $("#IPFrame").contents().find(".footer-bottom").css({"display": "none"});
              $("#IPFrame").contents().find(".wrapper").css({"padding": "0px 20px"});
              $("#IPFrame").contents().find("#embeded_menu").css({"display": "block"});
      
              }
              </script>
      
      
               <div class="codegena_iframe"><iframe id="IPFrame" onload='RemoveExtraDiv(); ' src="http://bbomplusfranchising.com/test/shop/" height="750" width="100%"  style="background:url('http://codegena.com/wp-content/uploads/2015/09/loading.gif') white center center no-repeat;border:0px; " name="my frame "></iframe></div><style>.codegena_iframe{position:relative;padding-bottom:56.25%;height:0;overflow: hidden;max-width:100%;}.codegena_iframe iframe{position:absolute;top:0;left:0;width:101%;height:100%;}</style>
      
  28. User Avatar
    AJ Boet
    Permalink to comment#

    Perfect! Short, Simple.. Just Great!

  29. User Avatar
    Maria
    Permalink to comment#

    Thanks so much for sharing this!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag