1

La pregunta podria hacerse sin colocar codigo pero como no es aconsejable dejo el codigo en cuestion, de todas formas creo que lo que estoy buscando es alguna funcion "generica" de js

Tengo un sitio que al entrar, se muestra un "slider" hecho con css, el cual muestra unas 4 imagenes, tal vez mas. La cosa es que al entrar al sitio, la primera vez que se muestra el slider, las imagenes están una fracción de segundo en blanco, hasta quse se cargan por completo. Una vez que vuelve a empezar el slider, se ve perfecto. Lo que yo quisiera es que la pagina se cargue por completo (o al menos que se descarguen estas 4 imagenes que son las que se van a visualizar en el inicio).

Tengo un loader pero no funciona como espero, se muestra un instante pero no termina de cargar la pagina correctamente

 <!-- Loader -->
    <div id="preloader">
        <div id="status">
            <div class="spinner">Cargando...</div>
        </div>
    </div>

Este es el css de la animacion para la transicion entre imagens

.background-container {
  position: relative;
  background-color: black;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
 }

.background-animation:before {
  content:'';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.69);
 }

.background-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: url("../images/1.jpg");
  background-size: cover;
  animation: backgroundAnimation 20s infinite;
  }

  @keyframes backgroundAnimation {
   25%{
    background: url("../images/1.jpg");
    background-size: cover;
   }

50%{
  background: url("../images/2.jpg");
  background-size: cover;
 }

 75%{
    background: url("../images/3.jpg");
    background-size: cover;
 }

 100%{
    background: url("../images/4.jpg");
    background-size: cover;
 }

}

Y este el html

  <!-- START HOME -->
    <section class="section h-100vh clip-home jarallax background-container" id="home">
        <div class=" background-animation"></div>
        <div class="header-table">
            <div class="header-table-center">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-12">
                            <div class="text-center header-content mx-auto">
                                <h1 class="header-name text-success text-capitalize mb-0">Amparando Tu Salud <br> <span class="simple-text-rotate text-white font-weight-bold" style="font-size:0.5em;">Somos Profesionales. - Estás en Buenas Manos - Salud Humana, Salud Ambiental. </span></h1>
                                <p class="text-white mx-auto header-desc mt-4 simple-text-rotate">
                                    
                                     Somos un equipo conformado por Abogados, Especialistas en Salud, Ingenieros y Arquitectos.
                                     - Garantizando el acceso a la plena salud ambiental y salud humana a todos y todas
                                    - Todos los habitantes gozan del derecho a un ambiente sano, equilibrado, apto para el desarrollo humano
                                </p>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>            
        <div class="scroll_down mb-5">
                <a href="#objetivos" class="btn btn-outline-custom btn-round scroll">Conocer Más</a>
            
        </div>
    </section>
    <!-- END HOME -->

1 respuesta 1

0

Agrega esta etiqueta e intenta lo siguiente:

<div class="loader">
</div>

CSS

Utiliza el siguiente CSS para mostrar la imagen de carga en el div loader. Hace que la imagen se sitúe en el centro de la página y cubre toda la pantalla con un fondo blanco semitransparente.

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://i.gifer.com/74H8.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}

Javascript:

Antes que nada, incluye la librería jQuery

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">/script>

Ahora añade la siguiente línea de código para esconder la imagen de carga cuando la página haya terminado de cargar

<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>

Esto serviria para tu loader

2
  • Puedes compartir tu codigo js para poder ayudarte a solucionar tu problema el 14 jun. 2020 a las 21:18
  • No me funcionó, por un lafo hay que cambiar el evento load por on de la siguiente manera $(window).on('load', function () { pero de todas formas no me funciona, efectivamente tarda un poquito mas en cargar pero el problema se repite
    – Agustin G.
    el 14 jun. 2020 a las 21:28

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.