0
<style>
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('load.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>

En body:

<div class="loader">

<script type="text/javascript">
    //  Jquery 3.x
    $(window).on('load', function() {
    $(".loader").fadeOut("slow");
    });
</script>

No logro en hacerlo funcionar en la versión 3. Gracias

Edito: La idea es cargar una animación mientras carga el contenido de la web. (un loader)

La animación debe desaparecer al cargar la web. Con la versión 1.x no tenia problemas, al migrar a la version 3.x e ir adaptando el contenido, algunas cosas funcionas otras no.

5
  • Te recomiendo pases por el Centro de ayuda . Te ayudará a hacer una pregunta más concisa. ¿Qué es exactamente lo que no funciona? Error que te da... Commented el 30 ene. 2018 a las 9:56
  • Aquí tuvieron el mismo problema: stackoverflow.com/questions/42784564/…
    – XBoss
    Commented el 30 ene. 2018 a las 11:37
  • Que es lo que no lográs? Por qué usar un bacground para introducir el loader y luego lo quitas? no entiendo que quieres hacer. Si pones el loader como fondo, no tiene sentido usar el z-index: 9999; ni el position. <style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; display:flex; } </style> <div class="loader" id="loader"> <img src='image.gif'> </div> <script type="text/javascript"> // Jquery 3.x $(window).on('load', function() { $(".loader").fadeOut("slow"); }); Prueba de este modo a ver. Si te va mejor ahora no puedo probarlo pero vamos deberia fu Commented el 30 ene. 2018 a las 11:37
  • Edito: La idea es cargar una animación mientras carga el contenido de la web. (un loader) La animación debe desaparecer al cargar la web. Con la versión 1.x no tenia problemas, al migrar a la version 3.x e ir adaptando el contenido, algunas cosas funcionas otras no. Commented el 31 ene. 2018 a las 14:35
  • 1
    ¿Dónde incluyes jQuery 3? ¿Dónde va el código de $(window).load? Por favor, lee Cómo preguntar y edita la pregunta para crear un ejemplo mínimo verificable y que podamos ver el problema.
    – Alvaro Montoro
    Commented el 31 ene. 2018 a las 15:31

1 respuesta 1

0

Aquí se carga un loader haciendo uso de jquery 3.2.1 Todo funciona correctamente, luego el fallo de tu aplicación no está en el uso de jquery 3.2.1 para esto.

 $(window).on('load', function() { 
    $(".loader").fadeOut("slow");
 });
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('https://mir-s3-cdn-cf.behance.net/project_modules/disp/09b24e31234507.564a1d23c07b4.gif') 50% 50% no-repeat rgb(249,249,249);
}

La version 3 de jquery funciona en este ejemplo.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="loader">

0

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.