1

Quiero que cuando se de click en un boton se active una animación de 'cargando' y despues mostrar un iframe.

div que contiene la animación:

<div id="animacion"></div>

boton que activa el iframe:

<a href="#" id="ir">mostrar</a>

codigo javascript que tengo hasta ahora:

//Al hacer click en el boton ir
$('#ir').click(function() {
var url = ';
document.getElementById("iframe").innerHTML = "<iframe src=" + url + ">Tu navegador no soporta iframes.</iframe>";
console.log(url)
})
1

1 respuesta 1

0

Con la nueva pregunta, creo que la mejor solución es meter dentro del iframe un evento onLoad. En primer lugar, en el onclick de #ir, mostramos el div de carga

    $('#ir').click(function() {
       //Aquí creo el div de animación y lo inserto en el body
       let div = document.createElement('div')
       document.body.appendChild(div);
       div.id = 'animacion'
       var url = '';
       document.getElementById("iframe").innerHTML = "<iframe src=" + url + " onload="ocultarLoader();">Tu navegador no soporta iframes.</iframe>";
})

Aquí se esta mostrando ya el loader animacion, y se esta cargando el iframe. Cuando termine de cargar se ejecutara la función ocultarLoader() que sería algo así:

function ocultarLoader() {
  //esto oculta el div animacion 
  document.getElementById("animacion").style.display="none";
}

Seguramente tengas que darle algún retoque, pero si entiendes el planteamiento creo que te saldrá bien. Me comentas a ver que tal.

Un saludo!

6
  • Gracias. Pero como quedaría todo armado? Ya que no logro comprender. Lo que quiero es que se ejecute primero la animación y después muestre el iFrame ya cargado. Ya que me muestras el interval pero no se indica en ningún momento el div con la id 'preloader5'
    – Header90
    el 25 mar. 2019 a las 11:56
  • La animación no se ejecuta sola al cargar la página? O como lo haces hasta ahora? el 25 mar. 2019 a las 12:23
  • Sí. Pero lo que quiero lograr es que se cargue solo cuando de click en el botón que tiene la id 'ok' pero sucede que ese botón tiene la función de mostrar el iFrame... Esa es la idea, que salga la animación mientras carga el iFrame, ya que el iframe se demora en cargar el contenido y no se ve bien.
    – Header90
    el 25 mar. 2019 a las 13:30
  • Deberías de actualizar la pregunta, porque lo que acabas de decir difiere bastante de "mostrar una animación por unos segundos y despues que cargue un iframe" el 25 mar. 2019 a las 13:50
  • ya la expliqué mejor.
    – Header90
    el 25 mar. 2019 a las 17:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.