Showing iFrame only after its source content has been completely loaded

css, javascript, jquery

Solution

I would suggest you try the following:

<script type="javascript">
    var iframe = document.createElement("myIFrame");
    iframe.src = url;

        if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera){
                iframe.onreadystatechange = function(){
            if (iframe.readyState == "complete"){            
                //not sure if your code works but it is below for reference
                  document.getElementById('myIFrame').class = ShowMe;
                  //or this which will work
                  //document.getElementById("myIFrame").className = "ShowMe";

                }
            };
        }       
        else 
        {
            iframe.onload = function(){
                  //not sure if your code works but it is below for reference
                  document.getElementById('myIFrame').class = ShowMe;
                  //or this which will work
                  //document.getElementById("myIFrame").className = "ShowMe";
            };
        } 
</script>

Based on the code found here.

Problem

I have a iFrame on my page thats display style is none. I have a javascript function to set the source and then set the display to block. The problem is that the iframe shows up before the content of it is loaded and thus I get a flickering effect. It goes white first and then displays the content. So I need to set the source, and when done loading all content of its source, only set its display style. CSS & Javascript ``` .ShowMe{display:block;} function(url) { document.getElementById('myIFrame').src = url; document.getElementById('myIFrame').className = ShowMe; } ```

Original source