Fancybox: mostra il caricamento dell'animazione durante il caricamento del contenuto iframe

Question

Quando si utilizza jQuery e fancybox per mostrare un'altra pagina all'interno di un iframe, voglio mostrare l'animazione di caricamento mentre la pagina all'interno dell'iframe viene caricata. Questo è possibile quando si usa Ajax per caricare il contenuto, ma io voglio la stessa cosa quando uso iframe. È possibile anche dall'anima ottenere l'animazione di caricamento mentre il contenuto dell'iframe viene caricato?

Questo è il codice per mostrare l'iframe nella fancybox:

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

Answer 1

La ragione per l'animazione di caricamento non viene visualizzato è perché non c'è alcun concetto di caricamento che fancybox è al corrente per questo tipo di contenuto; semplicemente sovrappone un iframe alle dimensioni specificate e una volta completato per quanto riguarda fancybox, il lavoro è completato.

L'iframe procede quindi a caricare il contenuto specificato secondo le normali funzionalità del browser.

Immagino che lo sforzo che dovrete effettuare per abilitare il caricatore supererà di gran lunga il vantaggio di averlo.

Indipendentemente da ciò, la domanda jQuery .ready in a dynamically inserted iframe dovrebbe aiutarti a raggiungere la tua strada; ti mostra come inserire una richiamata nell'evento di caricamento dell'iframe, che potresti utilizzare per rimuovere lo spinner di caricamento dopo averlo aggiunto al clic?

Ci sono ovviamente ulteriori complicazioni nell'ottenere il controllo effettivo dell'iframe che le sovrapposizioni di fancybox, si spera che l'API lo aiuti, ma ancora una volta non sono sicuro che ne valga la pena.

Answer 2

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

che dovrebbe aiutare :-) Si tratta di una modifica della Fancybox originale (la versione più recente, BTW).

Attenzione! Da quello che ho letto dalla descrizione, questo non funzionerà con iFrame di domini incrociati.

Answer 3

Si può semplicemente collegare backgroung con i CSS a livello sottostante, che quando iframe sarà pronto sarà sovrapposizione tua backgroung con ogiva

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

Answer 4

È possibile collegare un gestore all'evento di carico del iframe fancybox e nascondere il caricatore .

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

    $.fancybox.showActivity(); 

Answer 5

Ho avuto la stessa domanda. Ecco come ho implementato una soluzione al problema dopo aver letto la risposta di 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(); 
    }); 

}); 

Naturalmente questo non funzionerà per gli URL esterni con l'X-Frame-Options HTTP set intestazione. Ad esempio https://www.google.com.au/.

Answer 6

questo ha funzionato per me:

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

     } 

Answer 7

Fancybox 2 esiste ora, e fornisce questo out-of-the-box.

Answer 8

Ci sono più risposte nel post this SO. Sfortunatamente non riesco a trovare una soluzione "reale", ma altre persone stanno sostituendo la sovrapposizione di pagine CSS (# fancybox-overlay) per includere uno spinner. Poi, quando alla fine la pagina iframe viene caricata, viene posizionata sopra lo spinner.

EDIT:

ho rinunciato a utilizzare fancybox per gestire il caricamento delle immagini e ho pensato di condividere la mia soluzione. Ho aggiunto un carico posizionato in modo assoluto gif della mia alla pagina, mostro appena prima di chiamare fancybox e posso catturare l'evento carico iframe con JQuery per nascondere il filatore, in questo modo:

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

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

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

se non sei chiamando fancybox manualmente come me, presumo che potrebbe facilmente collegare questo codice attraverso un evento click, vale a dire:

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

ho anche notato durante la riproduzione nella sorgente fancybox (v2.0.6) che sembra come fancybox usa l'evento load per mostrare/nascondere l'animazione di caricamento se autoSize è usato con un iFrame, anche se non ho testato la teoria.

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

Ciò è risolto con 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(); 
           }); 
          } 
        })