Mostrando un gif de carga durante 5 segundos automáticamente

Quiero mostrar un GIF de carga automáticamente cuando el usuario va al sitio web y después de 5 segundos desaparece.Mostrando un gif de carga durante 5 segundos automáticamente

Encontré este script que hace lo que quiero, pero no lo hace automáticamente. El usuario debe hacer clic en el botón para iniciarlo, lo que de alguna manera frustra el objetivo.

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> 
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 

function show() { 
    document.getElementById("myDiv").style.display="block"; 
    setTimeout("hide()", 5000); // 5 seconds 
} 

function hide() { 
    document.getElementById("myDiv").style.display="none"; 
} 

</script>

Lo puede ver en here.

Si hay alguna manera de hacerlo, o si hay una forma mejor de hacerlo, por favor, solo comenten.

Fuente

2011-12-23 connor.p

[tag: javascript] *** no *** [tag: java]. –

lo siento, no lo sé, todavía soy nuevo en todo –

Simplemente elimine onclick="show()", y agregue show(); como la última línea de su bloque de JavaScript.

Además, como soy sensible a global namespace pollution, lo haría así:

<script type="text/javascript"> 

    (function(){ 
    var myDiv = document.getElementById("myDiv"), 

     show = function(){ 
     myDiv.style.display = "block"; 
     setTimeout(hide, 5000); // 5 seconds 
     }, 

     hide = function(){ 
     myDiv.style.display = "none"; 
     }; 

    show(); 
    })(); 

</script>

Fuente

2011-12-23 16:51:57 ziesemer

Recuerda, sin embargo, si está cargando esto en el encabezado de la página, sus divs no existen en el dom. Lo mejor es hacerlo en la carga de la página. –

muchas gracias, funciona muy bien –

@DominicGreen - de acuerdo, pero esto funcionará con la muestra que mostró. De lo contrario, llamaría todo desde algo como 'jQuery.ready()'. – ziesemer

¿Ha intentado window.onload?

Algo a lo largo de las líneas de:

<body onload="show();"> 
..snip 
</body>

Fuente

2011-12-23 16:53:21

ahora no lo he hecho, nunca he oído hablar de ello, tal vez valga la pena investigar –

Añadir window.onload = show; hasta el final de la secuencia de comandos y se mostrará el cargador tan pronto como la página ha terminado de cargar. Querrá utilizar este evento para cualquier cosa que quiera hacer cuando el usuario abra la página, ya que se asegura de que toda la página esté disponible antes de tratar de manipular elementos en la página.

Fuente

2011-12-23 16:53:55 Hal

Puede eliminar el display: none; de myDiv. De esta forma, será visible desde el principio, y luego lo ocultará después de cinco segundos.

No es necesario ocultarlo primero con CSS, y luego mostrarlo con JavaScript, cuando desee que se muestre desde el principio.

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> 
<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 
setTimeout(function(){ 
    document.getElementById("myDiv").style.display="none"; 
}, 5000); 
</script>

Fuente

2011-12-23 16:54:13

¿Qué pasa si el usuario tiene Javascript deshabilitado? Luego, les mostrará una animación de carga y, a continuación, el script nunca lo eliminará. – Hal

@harrison_m ¡Punto válido, +1! –

poner esto justo después de <body>

<div id="myDiv"><img id="myImage" src="images/ajax-loader.gif"></div> 
<script> 
    setTimeout('document.getElementById("myDiv").style.display="none"', 5000); // 5 seconds 
</script>

Fuente

2011-12-23 16:55:14

Deshacerse de la imagen de style="display:none" para que la imagen aparece de forma predeterminada. Otros le dicen que primero llame al show(), pero eso es completamente innecesario. No necesita usar JavaScript para mostrar inicialmente la imagen; solo déjalo que se muestre por sí mismo. A continuación, quitarlo después de 5 segundos han pasado:

<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 
    setTimeout(function() { 
     document.getElementById("myDiv").style.display="none"; 
    }, 5000); // 5 seconds 
</script>

Fuente

2011-12-23 16:59:40

Mostrando un gif de carga durante 5 segundos automáticamente

Respuesta

Cuestiones relacionadas