Skip to main content
Edición de codigo
Origen Enlace
<!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'preloader, .black-screen').fadeOut('fast');
            });
        </script>
    </body>
</html>
<!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>
            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%;
            }
        </style>
    </head>
    <body>
        <div class="preloader"></div>
        <div class="objeto">UN DIV CUALQUIERA EN EL FONDO</div>
        <script type="text/javascript">
            $(function () {
                $('.preloader').fadeOut('fast');
            });
        </script>
    </body>
</html>
<!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>
Origen Enlace

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>
            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%;
            }
        </style>
    </head>
    <body>
        <div class="preloader"></div>
        <div class="objeto">UN DIV CUALQUIERA EN EL FONDO</div>
        <script type="text/javascript">
            $(function () {
                $('.preloader').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.