Mostrar imagen "Cargando" con JavaScript

   Hace mucho que tengo (no solo en mi blog) una imagen de carga, donde se muestra un GIF cargando una barra y esta desaparece al terminar de cargar todo el contenido de la página, pues bueno, aquí explicare un poco como hacer eso y sin complicaciones.

   Lo primero es conseguirnos una imagen GIF, hay muchos sitios, yo recomiendo cualquiera de estos generadores online:


   Luego que descarguemos nuestra imagen, vamos con el html básico, así que colocaremos esto donde queremos mostrar la barra de carga:
<div id="carga">
  <img src="nuestra_animacion.gif" />
</div>
   Simplemente lo que hacemos es mostrar la imagen dentro de un "div" y colocarle el id "carga", de esta forma podemos ubicarlo en nuestro script y ocultarlo justo después de finalizada la carga. Nuestro script queda de la siguiente manera:
window.onload = detectarCarga;
function detectarCarga(){
   document.getElementById("carga").style.display="none";
}
   Lo importante de este script son esas simples líneas de código, el evento windows.onload hace que se ejecute la función justo cuando termine de cargar la página, y la función en sí lo que hace es ocultar nuestra imagen y quitarla del contenido de la página. Entonces nuestro HTML queda de la siguiente manera:
<html>
  <head>
    <title>PROBANDO</title>
    <script>
      window.onload = detectarCarga;
      function detectarCarga(){
         document.getElementById("carga").style.display="none";
      }
    </script>
  </head>
  <body>
  <div id="carga">
    <img src="nuestra_animacion.gif" />
  </div>
  </body>
</html>
   Recordemos que lo importante es saber ubicar el elemento, colocarlo en una parte visible. Mas info del "onload": w3school.

IMPORTANTE

   La razón de hacerlo en una función es por si queremos hacer algo ademas de ocultar la imagen, pero si solo vamos a hacer eso podemos acortar el script de la siguiente manera:
window.onload = document.getElementById("carga").style.display="none";
   Entonces el html queda así:
<script>
  window.onload = document.getElementById("carga").style.display="none";
</script>
<div id="carga">
  <img src="nuestra_animacion.gif" />
</div>
   

10 Comentarios

Escribir Comentario
Anónimo
AUTOR
27 de febrero de 2013, 16:20 delete

no funciona no aparece nada

Responder
avatar
27 de febrero de 2013, 16:25 delete

No entiendo que no funciona, puedes ser más específico??

Responder
avatar
Anónimo
AUTOR
8 de enero de 2016, 21:59 delete

Si funciona, gracias por el aporte!

Responder
avatar
Yean Michel
AUTOR
18 de mayo de 2016, 13:38 delete

perfecto, esto funciona muy bien, llevo dias buscando una manera de lograr que se desapareciera la imagen gif y este codigo esta perfecto, gracias hermano

Responder
avatar
condorito
AUTOR
21 de noviembre de 2016, 10:22 delete

hola, mi pregunta es?? si quiero que lo atrás se vea opaco???, que no se puede utilizar, que debería hacer???

Responder
avatar
21 de noviembre de 2016, 22:28 delete

Una forma simple es utilizar CSS en la etiqueta IMG:

img src="cargando.gif" style="opacity: 0.5;"

Responder
avatar
Anónimo
AUTOR
19 de mayo de 2017, 14:33 delete

Buenas tardes como hago para que funcione en una pagina hija¿?

Responder
avatar
Alberto
AUTOR
3 de diciembre de 2017, 16:24 delete

a mi no me aparece nada,toda en blanco se queda la pagina :c

Responder
avatar
27 de abril de 2018, 11:09 delete

Muestra el código para poder darte una mano...

Responder
avatar
27 de abril de 2018, 11:11 delete

Página hija? Si quieres utilizarlo en todas las páginas simplemente incluye el script para cada página.

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión