Cómo mostrar un GIF de carga mientras se carga una imagen

Código CSS

Para lograr que aparezca un GIF de carga mientras la imagen se carga completamente, se puede utilizar JavaScript para mostrar el GIF de carga cuando se inicia la carga de la imagen y luego ocultarlo una vez que la imagen se ha cargado por completo.

Puede intentar lo siguiente:


  <style>
    #preloader {
      display: none; /* Ocultar por defecto */
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #fff;
      z-index: 9999;
    }
    #preloader img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>

  <div id="preloader">
    <img src="images/loading.gif" alt="Cargando...">
  </div>
  <img src="foto_alta_calidad.jpg" alt="Foto" onload="mostrarImagen()">
  <script>
    function mostrarImagen() {
      document.getElementById('preloader').style.display = 'none';
    }
    document.getElementById('preloader').style.display = 'block';
  </script>



El CSS muestra un DIV de carga que cubre toda la pantalla, con un GIF de carga en el centro. Se usa la propiedad display: none para ocultarlo por defecto.

Luego, se carga la imagen con la etiqueta <img> y se llama a la función mostrarImagen() cuando la imagen se carga por completo. Esta función oculta el DIV de carga.

Por último, justo después de la etiqueta <img> se agrega un script que muestra el DIV de carga, iniciando así la animación del GIF, antes de que la imagen se haya cargado por completo.

Con este código, cuando la página se carga, se muestra el GIF de carga. Cuando la imagen se carga, el GIF de carga desaparece y se muestra la imagen completa.



tags: imagen, carga, GIF, preloader, sitio web, JavaScript, optimización, rendimiento.

En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por ASP TEAM. Compartimos recursos útiles de buena fe para formar una base de conocimiento en el desarrollo de aplicaciones en ASP Clásico.