0

Estoy tratando de agregar una imagen de carga, que desaparezca usando un FadeOut(), pero seguro estoy haciendo algo mal, por que el fadeOut() no me funciona.

Por otro lado, quisiera que dicha imagen de carga pusiera la pantalla gris o de un color que denote que está cargando y de la sensación de carga.

Hasta ahora he intentado algo como esto: miejemplo

body{
  background-color: green;
}

.preloader {
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 9999;
    position: fixed;
    width: 100px;
    height: 100px;
    border: 10px solid #eee;
    border-top: 10px solid #666;
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    top: 35%;
    left: 40%;
    transform: translate(-50%, -50%);
}

@keyframes girar {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.objeto{
  background-color: blue;
  position: absolute;
  top: 25%;
  width: 100%;
  height: 50%;
}
<script type="text/javascript">
        $(window).load(function() {
            $(".preloader").fadeOut("fast");
        });
    </script>
<div class="preloader"></div>
<div class="objeto">
 UN DIV CUALQUIERA EN EL FONDO
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

1 respuesta 1

2

Principalmente es el método de $(window).load() esta mal implementado. Estas esperando que la ventana este lista para ocultar el cargar cuando este aun no esta listo por que el document aun no es cargado

Existe esta diferencia entre window que hace referencia a la ventana del navegador y document que hace referencia al documento HTML.

Si quieres esperar que el documento este listo y luego ocultarlo debes utilizar $(document).ready() como esta especificado en la documentacion

Tu código corregido quedaría algo así:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <style>
            html, body {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: green;
            }

            .preloader {
                display: block;
                margin-left: auto;
                margin-right: auto;
                z-index: 9999;
                position: fixed;
                width: 100px;
                height: 100px;
                border: 10px solid #eee;
                border-top: 10px solid #666;
                border-radius: 50%;
                animation-name: girar;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                top: 35%;
                left: 40%;
                transform: translate(-50%, -50%);
            }

            @keyframes girar {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }

            .objeto {
                background-color: blue;
                position: absolute;
                top: 25%;
                width: 100%;
                height: 50%;
            }

            .black-screen {
                width: 100%;
                height: 100vh;
                background-color: black;
                position: fixed;
                opacity: 0.5;
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <div class="preloader"></div>
        <div class="objeto">UN DIV CUALQUIERA EN EL FONDO</div>
        <div class="black-screen"></div>
        <script type="text/javascript">
            $(function () {
                $('.preloader, .black-screen').fadeOut('fast');
            });
        </script>
    </body>
</html>

También es un punto importante aclarar es el orden en que llamas las cosas, recuerda que el HTML como el css se va ejecutando en cascada, es decir que si tienes el script arriba de los elementos html, este ejecutara el script antes que los elementos html estén cargado, para eso se usa la función .ready() pero de igual forma te recomiendo dejar todo ordenado como la estructura que utilice en el ejemplo.

2
  • Muchísimas gracias! y eso que estaba siguiendo una guía por ahí jajaja. En cuanto a poner gris la pantalla durante la carga, lo haría dentro del mismo método?
    – Excorpion
    Commented el 2 dic. 2020 a las 14:32
  • 1
    Te agregue la funcion de la pantalla en gris, este es un div, fixed para que este sobrepuesto a todo y se oculta junto al spinner, esta opcion es muy basica y hay que agregarle muchas mas cosas, por ejemplo que sea responsive, que te bloquee el scroll mientras carga, etc. Commented el 2 dic. 2020 a las 14:38

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.