Come visualizzare il messaggio di caricamento quando viene caricato un iFrame?

Question

Ho un iframe che carica un sito Web di terze parti che è estremamente lento da caricare.

C'è un modo per visualizzare un messaggio di caricamento mentre l'iframe carica l'utente non vede uno spazio vuoto grande?

PS. Nota che l'iframe è per un sito Web di terzi, quindi non posso modificare/iniettare nulla sulla loro pagina.

Answer 1

ho fatto il seguente approccio css:

<div class="holds-the-iframe"><iframe here></iframe></div> 


.holds-the-iframe { 
    background:url(../images/loader.gif) center center no-repeat; 
} 

Answer 2

Sì, è possibile utilizzare un div trasparente posizionato sopra l'area iframe, con un caricatore GIF come unico sfondo.

Quindi è possibile collegare un evento onload per l'iframe ...

$(document).ready(function() { 

    $("iframe#id").load(function() { 
     $("#loader-id").hide(); 
    }); 
}); 

Buona fortuna

Answer 3

Credo che questo sta per aiutare: http://jsfiddle.net/UVsdh/

JS:

$('#foo').ready(function() { 
    $('#loadingMessage').css('display', 'none'); 
}); 
$('#foo').load(function() { 
    $('#loadingMessage').css('display', 'none'); 
}); 

HTML:

<iframe src="http://google.com/" id="foo"></iframe> 
<div id="loadingMessage">Loading...</div> 

CSS:

#loadingMessage { 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background: #ccc; 
    top: 0px; 
    left: 0px; 
    position: absolute; 
} 

Answer 4

$('iframe').load(function(){ 
     $(".loading").remove(); 
    alert("iframe is done loading") 
}).show(); 


<iframe src="http://www.google.com" style="display:none;" width="600" height="300"/> 
<div class="loading" style="width:600px;height:300px;">iframe loading</div> 

Answer 5

Se è solo un segnaposto che si sta tentando di raggiungere : un approccio pazzo è quello di iniettare il testo come sfondo-svg. Esso consente una certa flexbility, e da quello che ho letto il supporto del browser dovrebbe essere abbastanza decente (non ho provato però):

• Chrome> = 27
• FireFox> = 30
• Internet Explorer> = 9
• Safari> = 5,1

html:

<iframe class="iframe-placeholder" src=""></iframe> 

css:

.iframe-placeholder 
{ 
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100% 100%"><text fill="%23FF0000" x="50%" y="50%" font-family="\'Lucida Grande\', sans-serif" font-size="24" text-anchor="middle">PLACEHOLDER</text></svg>') 0px 0px no-repeat; 
} 

Cosa si può cambiare?

All'interno del background-value:

• font size: cerca font-size = "" e modificare il valore a tutto quello che vuoi

• colore del carattere: cerca riempimento = "".Non dimenticare di sostituire il # con% 23 se stai usando la notazione esadecimale dei colori. % 23 sta per un # nella codifica URL che è necessario che la stringa svg possa essere analizzata in FireFox.

• carattere

  famiglia: cerca font-family = "" ricordare per sfuggire le virgolette singole se si dispone di un tipo di carattere che è costituito da più parole (come con \ 'Lucida Grande \')

• testo : cerca il valore dell'elemento di testo dove vedi la stringa PLACEHOLDER. È possibile sostituire la stringa segnaposto con tutto ciò che è conforme url (i caratteri speciali devono essere convertiti per cento notazione)

esempio: http://jsfiddle.net/8t56Ljw0/

Pro:

• No HTML- supplementari elementi
• No js
• Il testo può facilmente (...) essere regolato senza la necessità di un programma esterno
• È SVG, quindi puoi inserire facilmente qualsiasi SVG che desideri.

Contro:

• supporto del browser
• E 'complesso
• E' hacky
• Se l'iframe-src non ha un set di sfondo, il segnaposto brillerà attraverso (che è non inerente a questo metodo, ma solo comportamento standard quando si utilizza un bg sull'iframe)

Lo consiglierei solo se è assolutamente necessario mostrare il testo come segnaposto in un iframe che richiede un po 'di flessibilità (più lingue, ...). Prenditi un momento e riflettici: tutto questo è davvero necessario? Se avessi una scelta, opterei per il metodo di @ Christina