I have a heavy process that requires several seconds to complete.
That's why I've added an animated loading page to make the wait acceptable.
<style>
.modal_gif {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('static/loading.gif')
50% 50%
no-repeat;
background-size: 80%, auto;
}
body.loading .modal_gif {
overflow: hidden;
}
body.loading .modal_gif {
display: block;
}
</style>
<script>
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
</script>
However, the gif weigh about 1MB and it is not displayed after the first request: there is only a semi-transparent veil on the screen.
The second and following requests are working well, which makes me think that it is a gif loading problem.
I'd like the animated loading gif to be always displayed when requested, even for the first request.
Do you know how to preload a gif animated file as hidden and display it even for the first request?
You can try preloading it using a dummy img tag (with visibility hidden, not display none). If we're at it, you can in the first place:
.modal_gif {
visibility: hidden;
display: block;
pointer-events: none;
}
body.loading .modal_gif {
visibility: visible;
overflow: hidden;
}
or even play with opacity 0 or opacity 1, the key here is pointer-events: none; so the image is clickable through.