7

Estoy intentando usar un loader con el evento window.load y todo me funciona muy bien. Pero al parecer en chrome, no se el resto de navegadores, cuando la pagina se carga desde el cache no se dispara el onload evento.

Al parecer pasa lo mismo cuando se usa onload con una imagen. Solo que con imagenes la solucion a esto es establecer el src atributo despues de agregar el handler al evento.

Pero con window.load no se como podria solucionar ese problema.

Dejo aqui el codigo del loader que estoy usando:

    window.onload = function(){
        if(containerLoader){
            containerLoader.fadeOut(200);
        }
        if(loaderMap){
            loaderMap.fadeOut(200);
        }        
    }

Como dije me funciona muy bien un par de veces pero si actualizo varias veces comienza a quedarse cargando el loader. Ademas estoy trabajando con shopify el cual me parece tiene incluido metodos para cachear la pagina y cargar mas rapido.

1
  • ¿Has probado readystatechange como alternativa al evento load. Aplicado a tu contexto sería así: document.onreadystatechange = function () { if (document.readyState == "complete") { if(containerLoader){ containerLoader.fadeOut(200); } if(loaderMap){ loaderMap.fadeOut(200); } } }
    – A. Cedano
    Commented el 17 may. 2022 a las 9:15

4 respuestas 4

10
+200

el evento onload no funciona bien por los problemas de caché que se ha comentado con anterioridad. Puedes probar

window.onpageshow = function () {
//algo
};

https://www.w3schools.com/jsref/event_onpageshow.asp

1
  • 1
    Guao perfecto busque mucho y no logre encontrar la solución. No conocía para nada ese evento. Muchas gracias. Commented el 18 may. 2022 a las 16:18
2

Por lo que veo es un error bastante frecuente de algunos navegadores, por lo que he visto, incluyendo el CDN de jquery en tu sitio debería funcionar.

<script
  src="https://code.jquery.com/jquery-3.6.0.slim.js"
  integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY="
  crossorigin="anonymous">
</script>

Parece ser que los desarrolladores de Chrome aún no han corregido este problema.

1
  • Estoy usando Jquey y no funciona Commented el 16 may. 2022 a las 19:58
2

Prueba con readystatechange como alternativa al evento load.

Según la doc esto debería funcionar, porque el estado complete ocurre cuando:

El documento y todos los sub-recursos han cargado completamente. El estado indica que el evento load ha sido disparado.

Cuando el valor de esta propiedad cambia, un evento readystatechange (en-US) se dispara en el objecto document.

Aplicado a tu contexto sería así:

document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    if(containerLoader){
            containerLoader.fadeOut(200);
        }
        if(loaderMap){
            loaderMap.fadeOut(200);
        }
  }
}
1
  • De hecho esto tampoco resuelve el problema. Y es que si no se dispara onload tampoco ese evento. Commented el 17 may. 2022 a las 13:25
1

el evento load tiene reportados varios problemas al cargar desde el caché. Puedes usar onpageshow en su defecto.

window.onpageshow = function () {
  //bla bla bla
};

Esto podría resolver el inconveniente, pero tiene sus limitaciones con versiones anteriores a IE 11 o Safari 5.

https://caniuse.com/?search=pageshow

Aquí puedes ver la documentación del evento.

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.