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>
   

6 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

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 EmoticonEmoticon