J'ai un iframe dans ma 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>

J'ajoute un spinner sur basic-HTML, et à l'intérieur d'une fonction pour le cacher, si l'iframe est la charge.

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

Parfois, le spinner ne se cachera pas même si je vois que la page est correctement chargée et dans la console, je ne vois aucun processus de chargement ouvert. Je dois recharger la page une fois, parfois plus, que tout fonctionne bien.

Est-ce que quelqu'un a une idée de ce que cela peut causer et/ou comment j'empêche ce problème ?

Merci beaucoup.

1
Greg 15 mars 2019 à 08:48

2 réponses

Meilleure réponse

Sur la base des informations liées dans les commentaires de la question, de Rahul Raut, je décide de le résoudre de cette manière

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);
      });
0
Greg 15 mars 2019 à 07:53

Si vous souhaitez masquer le spinner lorsque tout le contenu est prêt sur la page (ce qui signifie que toutes les ressources sont téléchargées comme des images, des polices, des css, des scripts, des iFrames, etc.), vous pouvez utiliser le code suivant. Si vous voulez masquer le spinner lorsque seul cet iFrame est chargé, veuillez vous référer au lien que j'ai également entré dans le commentaire.

 $(window).on('load', function() {
     $('#spinner').fadeOut();
 });   
1
Rahul Raut 15 mars 2019 à 06:53