¿Cómo mostrar el mensaje de carga cuando se carga un iFrame?

Tengo un iframe que carga un sitio web de terceros que es extremadamente lento de cargar.

¿Hay alguna manera de que pueda mostrar un mensaje de carga mientras se carga el iframe y el usuario no ve un gran espacio en blanco?

PD. Tenga en cuenta que el iframe es para un sitio web de terceros, por lo que no puedo modificar / inyectar nada en su página.

He hecho el siguiente enfoque CSS:

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

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

Creo que este código va a ayudar:

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

Si es solo un marcador de posición lo que está tratando de lograr: un enfoque loco es inyectar texto como un fondo svg. Permite cierta flexibilidad y, por lo que he leído, el soporte del navegador debería ser bastante decente (aunque no lo he probado):

• Cromo> = 27
• FuegoFox> = 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;
}

¿Qué puedes cambiar?

Dentro del valor de fondo:

• tamaño de fuente: busque font-size = "" y cambie el valor a lo que desee

• color de fuente: busque fill = "" . No olvide reemplazar el # con% 23 si está usando la notación de color hexadecimal. % 23 representa un # en la codificación de URL que es necesario para que la cadena svg se pueda analizar en FireFox.

• familia de fuentes: busque font-family = "" recuerde evitar las comillas simples si tiene una fuente que consta de varias palabras (como con \ 'Lucida Grande \')

• texto: busque el valor de elemento del elemento de texto donde ve la cadena PLACEHOLDER . Puede reemplazar la cadena PLACEHOLDER con cualquier cosa que sea compatible con la URL (los caracteres especiales deben convertirse a notación de porcentaje)

Ejemplo de violín

Pros:

• Sin elementos HTML adicionales
• No js
• El texto se puede ajustar fácilmente sin necesidad de un programa externo
• Es SVG, por lo que puede colocar fácilmente cualquier SVG que desee.

Contras:

• Soporte de navegador
• Es complejo
• Es hacky
• Si el iframe-src no tiene un fondo establecido, el marcador de posición brillará (lo cual no es inherente a este método, sino solo comportamiento estándar cuando usa un bg en el iframe)

Solo recomendaría esto solo si es absolutamente necesario mostrar texto como un marcador de posición en un iframe que requiere un poco de flexibilidad (varios idiomas, ...). Tómate un momento y reflexiona: ¿es todo esto realmente necesario? Si pudiera elegir, optaría por el método de @ Christina

$('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>

Aquí hay una solución rápida para la mayoría de los casos:

CSS:

.iframe-loading { 
    background:url(/img/loading.gif) center center no-repeat; 
}

Puede usar un GIF de carga animado si lo desea,

HTML:

<div class="iframe-loading">
    <iframe src="http://your_iframe_url_goes_here"  onload="$('.iframe-loading').css('background-image', 'none');"></iframe>
</div>

Con el evento onload, puede eliminar la imagen de carga después de que la página de origen se cargue dentro de su iframe.

Si no está utilizando jQuery, simplemente coloque una identificación en el div y reemplace esta parte del código:

$('.iframe-loading').css('background-image', 'none');

por algo como esto:

document.getElementById("myDivName").style.backgroundImage = "none";

¡Todo lo mejor!

Sí, puede usar un div transparente colocado sobre el área del iframe, con un gif de cargador como único fondo.

Luego, puede adjuntar un onloadevento al iframe:

 $(document).ready(function() {

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

He seguido el siguiente enfoque

Primero, agregue div hermano

$('<div class="loading"></div>').insertBefore("#Iframe");

y luego cuando el iframe completó la carga

$("#Iframe").load(function(){
   $(this).siblings(".loading-fetching-content").remove(); 
  });

<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo - IFRAME Loader</title>
<style>
#frameWrap {
    position:relative;
    height: 360px;
    width: 640px;
    border: 1px solid #777777;
    background:#f0f0f0;
    box-shadow:0px 0px 10px #777777;
}

#iframe1 {
    height: 360px;
    width: 640px;
    margin:0;
    padding:0;
    border:0;
}

#loader1 {
    position:absolute;
    left:40%;
    top:35%;
    border-radius:20px;
    padding:25px;
    border:1px solid #777777;
    background:#ffffff;
    box-shadow:0px 0px 10px #777777;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<div id="frameWrap">
<img id="loader1" src="loading.gif" width="36" height="36" alt="loading gif"/>
<iframe id="iframe1" src="https://bots.actcorp.in/ACTAppChat/[email protected]&authToken=69d1afc8d06fb97bdb5a9275edbc53b375c3c7662c88b78239ba0cd8a940d59e" ></iframe>
</div>
<script>
    $(document).ready(function () {
        $('#iframe1').on('load', function () {
            $('#loader1').hide();
        });
    });
</script>

</body>
</html>

Puede usar lo siguiente

$('#showFrame').on("load", function () {
        loader.hide();
});