Fancybox: Afficher l'animation de chargement pendant le chargement du contenu iframe

Question

Lorsque vous utilisez jQuery et fancybox pour afficher une autre page dans un iframe, je veux afficher l'animation de chargement pendant le chargement de la page dans l'iframe. C'est possible en utilisant ajax pour charger du contenu mais je veux la même chose en utilisant iframe. Est-il possible à partir de l'API d'obtenir également l'animation de chargement pendant le chargement du contenu de l'iframe?

C'est le code pour montrer l'iframe dans le fancybox:

var $fancybox = $("#openPopup").fancybox({ 
    'type': 'iframe', 
    'href': "Test.php" 
}); 

Answer 1

La raison pour laquelle l'animation de chargement n'apparaît pas parce qu'il n'y a pas de concept de chargement qui fancybox est au courant pour ce genre de contenu; il recouvre simplement une iframe aux dimensions spécifiées et une fois que c'est terminé pour fancybox, le travail est terminé.

L'iframe procède alors au chargement du contenu spécifié selon les fonctionnalités normales du navigateur.

J'imagine que l'effort que vous aurez à mettre pour permettre au chargeur l'emportera de loin sur l'avantage de l'avoir.

Quoi qu'il en soit, la question jQuery .ready in a dynamically inserted iframe devrait vous aider sur votre chemin; il vous montre comment pousser un rappel dans l'événement de chargement iframe, que vous pourriez utiliser pour supprimer le spinner de chargement après l'avoir ajouté sur clic?

Il y a bien sûr d'autres complications pour obtenir le contrôle réel de l'iframe que fancybox superpose, j'espère que l'API va aider cela, mais encore une fois, je ne suis pas certain que cela en vaille la peine.

Answer 2

http://panduwana.wordpress.com/2010/05/09/fancybox-iframe-patch/

qui devrait aider :-) Il est une modification de l'original Fancybox (la dernière version, BTW).

Attention! D'après ce que j'ai lu dans la description, cela ne fonctionnera pas pour les iFrames inter-domaines.

Answer 3

Vous pouvez simplement attacher backgroung avec CSS à la couche ci-dessous, que lorsque iframe sera prêt, il chevauchera votre backgroung avec spinner

#fancybox-outer{ 
    background:#fff url("$path to animation/ajax-loader.gif") no-repeat 50% 50% !important; 
} 

Answer 4

Vous pouvez attacher un gestionnaire à l'événement de charge du fancybox iframe et cacher le chargeur .

$('<a href="url_here"> </a>').fancybox({ 
     type: 'iframe' 
     onComplete: function(){ 
      $('#fancybox-frame').load(function(){ 
       $.fancybox.hideActivity(); 
      }); 
     } 
    }).click(); 

    $.fancybox.showActivity(); 

Answer 5

J'ai eu la même question. Voici comment j'ai implémenté une solution au problème après avoir lu la réponse de Steve.

HTML:

<a id="myLink" href="/slow-loading-url">My Link</a> 

JavaScript:

$(document).ready(function() { 

    $("#myLink").click(function(event) { 
     $.fancybox.open(this.href, {type: "iframe"}); 
     $.fancybox.showLoading(); 
     $("iframe.fancybox-iframe").load(function() { 
      $.fancybox.hideLoading(); 
     }); 
     event.preventDefault(); 
    }); 

}); 

Bien sûr, cela ne fonctionnera pas pour les URL externes avec l'en-tête Options X-Frame HTTP ensemble. Par exemple https://www.google.com.au/.

Answer 6

Cela a fonctionné pour moi:

'onComplete' : function(){ 
      jQuery.fancybox.showActivity(); 
      jQuery('#fancybox-frame').load(function(){ 
       jQuery.fancybox.hideActivity(); 
      }); 

     } 

Answer 7

Fancybox 2 existe maintenant, et fournit ce hors-the-box.

Answer 8

Il y a plus de réponses dans this SO post. Malheureusement, je ne peux pas trouver une "vraie" solution, mais d'autres personnes remplacent le recouvrement de page CSS (# fancybox-overlay) pour inclure un spinner. Ensuite, lorsque la page iframe'd se charge, elle est placée sur le spinner.

EDIT:

J'ai renoncé à l'aide fancybox pour gérer l'image de chargement et pensé que je partage ma solution. J'ai ajouté une charge gif position absolue de mon propre à la page, le montrer juste avant d'appeler fancybox et je peux capturer l'événement chargé iframe avec JQuery pour cacher la fileuse, comme ceci:

$("#progressIcon").show(); 

$.fancybox.open({ type: "iframe", minWidth: 990, minHeight: 690, href: URL, title: "Basket" }); 

$("iframe").load(function() 
{ 
    $("#progressIcon").hide(); 
}); 

si vous n'êtes pas appelle fancybox manuellement comme je suis, je suppose que vous pourriez tout aussi facilement joindre ce code par un événement de clic, à savoir:

$('.fancybox').fancybox(); 
$('.fancybox').click(/* ... */); 

J'ai aussi remarqué en jouant dans la source qu'il semble fancybox (de v2.0.6) Comme fancybox utilise l'événement load pour afficher/masquer l'animation de chargement si autoSize est utilisé avec un iFrame, bien que je n'ai pas testé la théorie.

if (type === 'iframe' && current.autoSize) { 
    F.showLoading(); 

    F._setDimension(); 

    F.inner.css('overflow', current.scrolling); 

    content.bind({ 
     onCancel : function() { 
      $(this).unbind(); 

      F._afterZoomOut(); 
     }, 
     load : function() { 
      F.hideLoading(); 

      try { 
       if (this.contentWindow.document.location) { 
        F.current.height = $(this).contents().find('body').height(); 
       } 
      } catch (e) { 
       F.current.autoSize = false; 
      } 

      F[ F.isOpen ? '_afterZoomIn' : '_beforeShow'](); 
     } 
    }).appendTo(F.inner); 

} else { 
    F.inner.append(content); 
    F._beforeShow(); 
} 

Answer 9

Ceci est à résoudre avec z-index

<style> 
    #fancybox-loading{z-index:99999;} 
</style> 


<script> 
        $.fancybox({ 
          'href'   :url, 
          'width'   : 900, 
          'height'  : 600, 
          'scrolling' : 'auto', 
          'type'    : 'iframe', 
          'titleShow'  : false, 
          'onComplete' : function() { 
           $.fancybox.showActivity(); 
           $('#fancybox-frame').load(function() { 
            $.fancybox.hideActivity(); 
           }); 
          } 
        })