CODEWITHSUNDEEP
javascriptjquery
Greg
Greg

Reputation: 75

feedback onload a iframe sometime not work well

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.

Upvotes: 1

Views: 302

Answers (2)

Greg
Greg

Reputation: 75

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);
      });

Upvotes: 0

Rahul Raut
Rahul Raut

Reputation: 633

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();
 });

Upvotes: 1

Related Questions