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

Carlos Martínez

27 de febrero de 2013, 16:25 delete

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

8 de enero de 2016, 21:59 delete

Si funciona, gracias por el aporte!

Yean Michel

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

condorito

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???

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

19 de mayo de 2017, 14:33 delete

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

Alberto

3 de diciembre de 2017, 16:24 delete

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

27 de abril de 2018, 11:09 delete

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

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.

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

Carlitox en la Web

Mostrar imagen "Cargando" con JavaScript

10 Comentarios