0

Buenos días,

Estoy desarrollando mi sitio web pero no tengo conocimientos en JavaScript y no se cómo hacer algo que ustedes por ahí si...

Tengo transiciones (fadein) que van mostrando los elementos dentro del body (ej: el header aparece desde arriba, el main desde abajo). El problema es que el main contiene fotografías un poco pesada, tardan en cargarse, y la transición se produce igual, cuando las imágenes no están cargadas completamente, y se ve mal. Por ejemplo, esta página no muestra el contenido hasta que no esta cargado completamente, para que las transiciones muestren correcta y ordenadamente todo el contenido.

Entonces lo que quiero hacer es mostrar un gif loading hasta que todo el contenido dentro del body este cargado, y ahí recién mostrarla y que las transiciones que hice con CSS3 muestren el contenido correctamente. Algo parecido a lo que hace este jQuery plugin. Ustedes me dirán, ¿por qué no usas el plugin ese? la razón es que no quiero sobrecargar mi página con plugins externos y hacer yo mismo las cosas.

Desde ya, muchas gracias.

1

2 respuestas 2

1

Puedes utilizar la libreria queryloader2 Plugin queryloader2

Con esto cargara el contenido antes de mostrarlo, espero te sirva.

$("body").queryLoader2({
  barColor: "#555566",
  backgroundColor: "#fff",
  percentage: true,
  barHeight: 1,
  completeAnimation: "grow",
  minimumTime: 100,
  onLoadComplete: hidePreLoader
});

function hidePreLoader() {
  $("#precarga").hide();
}
/* Preload */
#precarga {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 9999;
}



/*Body*/
body {
  background-color: #fff;
  color: #778899;
  font-family: 'Open Sans', sans-serif;
  text-rendering: optimizelegibility;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Ejemplo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.queryloader2/3.2.2/jquery.queryloader2.min.js"></script>

</head>

<body>
  <div id="precarga"></div>

  <div id="contenido">
    <h1>Contenido de la Pagina</h1>
  </div>

</body>

</html>

-1

Con Jquery puedes detectar que cargó la pagina con jQuery(window).load

jQuery(window).load(function () {
   //ya cargo la pagina 
   //Oculta o quita el gif de loading
   //Inicia los fade's
});

Documentación

1
  • Se agradecería que explicaran por que la puntuación negativa
    – Lato
    Commented el 24 ago. 2017 a las 20:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.