feedback onload a iframe sometime not work well

Question

I have an iframe inside my page.

<iframe id="iframe" src="myurltopage" name="iframe" title="..." overflow-y='scroll' overflow-x='hidden'></iframe>      
<div id="spinner"><h3><i class="fa  fa fa-spinner fa-spin"></i></h3></div>

I add a spinner on basic-HTML, and inside a function to hide it, if the iframe is the load.

$(document).ready(function(){    
    $('#iframe').on('load', function()
    {   
        $('#spinner').fadeOut();
    }    
});

Sometimes, the spinner won't hide even though I see the page is correctly loaded and in the console, I cannot see any open loading processes. I have to reload the page one times, sometimes more, than all works fine.

Did anyone have an idea what it can cause and/or how I prevent this issue?

Thanks a lot.

Where is the spinner div inside iframe or outside the iframe? — Rahul Raut, Mar 15 '19 at 05:57
This will help you in solving your problem - https://stackoverflow.com/questions/17158932/how-to-detect-when-an-iframe-has-already-been-loaded/36155560#36155560 — Rahul Raut, Mar 15 '19 at 06:23
Check this link https://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content?answertab=votes#tab-top — Rohit Mittal, Mar 15 '19 at 07:18

score 1 · Answer 1 · answered Mar 15 '19 at 06:53

If you want to hide spinner when all the content is ready on the page (means all the resources are downloaded like images, fonts, css, scripts, iFrames etc) then you can use following code. If you want hide spinner when only that iFrame is loaded please refer the link which I have also entered in the comment.

 $(window).on('load', function() {
     $('#spinner').fadeOut();
 });

score 0 · Accepted Answer · answered Mar 15 '19 at 07:53

Based on the linked info in the comments of the question, from Rahul Raut, i decide to solve it in this way

var init=false;

    $(function () {
          var innerDoc = ($("#iframe")[0].contentDocument) ? $("#iframe")[0].contentDocument:$("#iframe")[0].contentWindow.document;
          innerDoc.onreadystatechange = function () {
                if(init==false){  alert("Go");   }
                if ($('#spinner').is(":visible") == true){ $('#spinner').fadeOut(); }           
              return;
          };      
          setTimeout(innerDoc.onreadystatechange, 3000);
      });

feedback onload a iframe sometime not work well

2 Answers2