1

Estoy teniendo un problema Hice esta pagina web

funciona como lo espero pero si la abro en chrome del celular luego de refrescar la pagina o de ir a otra pagina el preloader vuelve a aparecer, ¿alguna idea de como solucionarlo?

Este es el código html:

<br> 
<body>
<div id="preloader">
    <div class="cssload-loader-inner">
        <div class="cssload-cssload-loader-line-wrap-wrap">
            <div class="cssload-loader-line-wrap"></div>
        </div>
        <div class="cssload-cssload-loader-line-wrap-wrap">
            <div class="cssload-loader-line-wrap"></div>
        </div>
        <div class="cssload-cssload-loader-line-wrap-wrap">
            <div class="cssload-loader-line-wrap"></div>
        </div>
        <div class="cssload-cssload-loader-line-wrap-wrap">
            <div class="cssload-loader-line-wrap"></div>
        </div>
        <div class="cssload-cssload-loader-line-wrap-wrap">
            <div class="cssload-loader-line-wrap"></div>
        </div>
    </div>
   </div>
</body> 
<br>

Este es el css:

#preloader{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
background: none repeat scroll 0 0 #000000;
}`<br>Y este el javascript relevante:<br>

$(window).on("load", function(){
$("#preloader").fadeOut("slow");    
}); 
12
  • Puedes ocultarlo hasta que cargue el documento $(document).ready(function(){ $("#preloader").fadeOut("slow"); }); Commented el 5 sept. 2018 a las 23:31
  • no me entro en el codigo pero tambien puse eso y no funciona, si entras a la pagina y ves el codigo fuente ahi sale el archivo javascript, no se porque no anda en mobile se buguea eso Commented el 6 sept. 2018 a las 0:14
  • Me funciono bien en mobil, si se muestra pero desaparece en cuanto carga el sitio. Lo probe en Android Commented el 6 sept. 2018 a las 0:38
  • pero le diste a recargar? a mi lo que me pasa es que cuando recargo la pagina o voy a otra pagina se queda y no desaparece, eso es lo que no quiero que pase Commented el 6 sept. 2018 a las 0:58
  • si lo abro en modo incógnito anda bien, pero aparece el banner abajo del servidor cosa que en modo normal no aparece, estoy empezando a creer que es cosa del server ese 000webhost... Commented el 6 sept. 2018 a las 1:08

2 respuestas 2

1

Mira este ejemplo

HTML

<body>
    <div id="Cargando">Cargando...</div>
....

Ponlo al iniciar tu sitio que sea lo primero que cargue la pagina

JS

    <script>
    $(document).ready(function(){
        setTimeout(function(){
            $("#Cargando").hide();
        },100);
    });
    </script>

Esto lo pones al final de tu pagina, ya que cargaste todo el HTML, CSS, etc

y por ultimo

CSS

<style>
#Cargando{width:100%;height:9999%;position:absolute;top:0px;padding:0px;background:white;text-align:center;z-index:9999;padding-top:20px;color:black;;}
</style>

Esto lo pones en el head de tu sitio

Espero sirva de algo, Saludos :)

0

Luego de buscar encontre la solución en este post

Al colocar este código:

window.addEventListener ? 
window.addEventListener("load",yourFunction,false) : 
window.attachEvent && window.attachEvent("onload",yourFunction);

Luego con eso si detecta el evento load en mobile y le agrego la funcion

$(".preloader").fadeOut("slow");

Y ahi si funciona al recargar la pagina anda bien.
Gracias a todos por su ayuda.

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.