I'm trying to use a loader with the event window.load
and everything works fine for me. But apparently in chrome, I don't know about other browsers, when the page is loaded from the cache the onload
event is not fired.
Apparently the same thing happens when onload is used with an image. Only with images the solution to this is to set the src attribute after adding the handler to the event.
But window.load
I don't know how to solve that problem.
I leave here the code of the loader that I am using:
window.onload = function(){
if(containerLoader){
containerLoader.fadeOut(200);
}
if(loaderMap){
loaderMap.fadeOut(200);
}
}
As I said it works very well for me a couple of times but if I update several times it starts to load the loader. I am also working with shopify which seems to me to have included methods to cache the page and load faster.
the onload event doesn't work properly due to the caching issues discussed above. you can try
https://www.w3schools.com/jsref/event_onpageshow.asp
From what I see it's a fairly common bug in some browsers, from what I've seen including the jquery CDN on your site should work.
It seems that the Chrome developers haven't fixed this problem yet.
Try readystatechange as an alternative to the load event .
According to the doc this should work, because the state
complete
occurs when:Applied to your context it would be like this:
the load event has several reported problems when loading from the cache. You can use onpageshow instead.
This might fix the issue, but it has its limitations with versions prior to IE 11 or Safari 5.
https://caniuse.com/?search=pageshow
Here you can see the documentation of the event.