How do I detect when an iframe starts loading and when it finishes loading

Question

I am working on a project where I upload files using an iframe.

I need to show a pre-loader when the iframe starts uploading the file and hide the pre-loader when the iframe finishes loading.

Can anybody help me with this?

possible duplicate of [How to detect if the iframe is loaded?](http://stackoverflow.com/questions/12267010/how-to-detect-if-the-iframe-is-loaded) — Ohgodwhy, Jul 27 '13 at 20:37
better show some rough structure so we can follow and suggest. Basically, preloader gif can be set up in the page embedded in iframe. Unless you have more complicated file / code structure... — web2kx, Jul 27 '13 at 20:38

score 2 · Accepted Answer · answered Aug 08 '13 at 22:01

I found solution:

this is parent document of Iframe:

<div id="loader"></div>
<div class="iframeClass">
    <iframe src="myIframe.php" id="myIframe" frameborder="0"></iframe>
</div>
<script type="text/javascript">
    document.getElementById('myIframe').onload = function() {
        document.getElementById('loader').style.display = 'none';
    }
</script>

this is iframe document:

<form action="myIframe.php" method="post" enctype="multipart/form-data" id="myForm">
<input type="file" name="myFile" id="myFile" />
</form>
<script type="text/javascript">
    document.getElementById('myFile').onchange = function() {
        top.document.getElementById('loader').style.display = 'block';
        document.getElementById('myForm').submit();
    }
</script>

enjoy guys :)))

score 0 · Answer 2 · answered Jul 27 '13 at 22:53

You can try following jquery code:

$(document).ready(function(){
alert("Iframe Start Loading ...");
       var ifr=$('<iframe></iframe>', {
            id:'frame',
            src:'http://ernagroup.com',
            style:'display:none',
            load:function(){
                $(this).show();
                alert('iframe loaded !');
            }
        });
        $('body').append(ifr);
});

How do I detect when an iframe starts loading and when it finishes loading

2 Answers2