How to display a upload image while the iframe content is loaded?

Question

How to display a loading image while the contents of iframe is loaded?

Answer 1

The big problem is that the iframe is in a different context than yours. I would point out that this may be tortuous, or even impossible, if the iframe contains material from a field other than frame mother.

I will give a suggestion that uses jQuery, for convenience and for being a practically ubiquitous library. Let us know if jQuery does not suit you.

To access the contents of a frame daughter, you can use the method .contents() jQuery. 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 content from frame mother (if your code is on iframe), you add one more 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 lively before of iframe load. Hence you elaborate some logic in iframe or in the frame mother who hides or eliminates the gif lively after the page load event iframe.

If you cannot change the code of iframe, you can also use the function setInterval to read the state of iframe (maybe search for a specific element) periodically, to see if the page was fully loaded. Just note that this alternative is somewhat inelegant.

Good luck!

Answer 2

I believe that what you want is something in that sense:

http://lucasmoreira.com.br/2013/07/15/carregamento-da-pagina-com-loading/

This article is very didactic. What you will 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 perform the loading:

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

})

I hope you helped him.