How do I show a loading image while the iframe contents are loaded? [closed]

The big problem is that iFrame is in a different context than yours. I already added that this could be tortuous or even impossible if the iFrame contains material from a different domain than the frame parent.

I'll give you a hint that uses jQuery, for convenience and for being a virtually ubiquitous library. Let us know if jQuery does not suit you.

To access the contents of a frame child, you can use the .contents() method. of jQuery. From the documentation:

  

The .contents () method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.

Example:

$("idDaTuaIFrame").contents().find(".foo");

To access parent frame content (if your code is in iFrame ), you add an extra parameter in the query, parent.document . As follows:

$("#foo", parent.document); // você acaba de acessar o elemento de ID foo na frame mãe

Based on this, you can insert a gif animated before from the iFrame load. Then you work out some logic in iFrame or frame that hide or delete gif animated after page load the iFrame .

If you can not change the iFrame code, you can also use the setInterval to read the status of the iFrame (maybe search for some specific element) periodically to see if the page has been completely loaded. Just note that this alternative is somewhat inelegant.

Good luck!

I believe that what you want is something like this:

link

This article is well didactic. What you'll have to do is use Jquery and create a loading function.

function loading(status) {
if ( status == 1 )
    $('#loading').fadeIn();
else
    $('#loading').fadeOut();

}

And in your iframe, set it with an ID to be manipulated.

And finally create a function for when you are ready to do the loading:

$(function() { // Quando a página estiver carregada
loading(0); // Esconder o loading

})

I hope you have helped him.