Displaying loading.gif before iframe is loaded

Question

So I have this button that when clicked on will send you to the next slide (void(0)). The next slide is an iframe which is loaded only when you click on the button. Before the iframe is fully loaded, an animated GIF should show up and in turn hide after the content is fully loaded.

In my case, the GIF is never displayed. It's totally blank until the iframe is fully loaded. What is wrong?

Here is the script:

<script type="text/javascript"> 
    function hideLoading() { 
        document.getElementById('loading').style.display = "none"; 
        document.getElementById('edtwo').style.display = "block"; 
    } 
</script> 

The button:

<span id="nextBtn1"><a href="javascript:void(0);"
onClick='document.getElementById("edtwo").src="ed2.html";'></a></span>

And the next slide which includes the GIF and the iframe:

<li><div id="loading"><img src="_img/loading.gif" alt="Loading"/></div>
<iframe id="edtwo" onload="hideLoading()";></iframe></li>

Answer 1

The problem is that your iframe is initially displayed (and moreover, added in the DOM tree). Inspite of its empty src attribute it will load empty page and execute onload event handler. So you will have your indicator hidden as a result of calling hideLoading.

As you can see in this exmaple, onload triggers without clicking on link.

You can remove frame from DOM tree and add it when user clicks "Next" button or change .style.display to empty string (to show it) of gif loader at this time.