Mostrar imagen "Cargando" con JavaScript

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>
   


Suscribirse a: Enviar comentarios (Atom)