I'm using jquery to toggle a loader animation on page load: when the page (text and images) is loading, the div containing the loader animation is shown over the page. When the page is fully loaded the div with the loader is toggled off.
<div class="loader">
<div class="cssload-speeding-wheel"></div>
</div>
$(document).ready(function(){
$(window).on('load',function() {
$('.loader').hide();
});
// Other things...
});
and this works for the first time you open the page, but at the second time, when images are already cached the $(window).on('load', ...) is not execued (I guess because images are loaded faster before document.ready) and consequently the loader is not toggled off.
P.S. I noticed this while testing on Android with Chrome, on my PC this problem is not showing
Does anyone have an idea to fix this problem?
Fixed with this code
$(window).on('load',function() {
$('.loader').hide();
});
$(document).ready(function(){
// Other things...
});