title: Jquery flash of unstyled content (IE and Chrome)
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery">Cross-browser window resize event - JavaScript / jQuery</a><br>
    <a href="https://stackoverflow.com/questions/8244544/jquery-flash-of-unstyled-content-ie-only">Jquery flash of unstyled content (IE only)</a>  </p>
  </blockquote>
  
  
  
  <p>I have a div (#container) where on a click event I swap out an image and replace it with a YouTube video:</p>
  
  <pre><code>$("#feature_content").click(function(){
                  var iframe = "&lt;iframe /&gt;";
  
                  var url = "http://www.youtube.com/embedlink";
  
                   $(iframe, {
                      name: 'videoframe',
                      id: 'videoframe',
                      src: url,
                      width: '600',
                      height: '335',
                      frameborder: 0,
                      allowfullscreen: true
                  }).appendTo(this);
  
                  $(this).find('img').fadeOut(function() { $(this).remove();});
  
      });
  </code></pre>
  
  <p>However, I am getting a flash of unstyled content (the iframe) BELOW the div before the video starts playing.</p>
  
  <p>This is happening in IE and Chrome, but not Firefox</p>