My task involves a lengthy process that takes several seconds to complete.
To make the waiting time more bearable, I have implemented an animated loading page.
<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>
Unfortunately, the gif file is quite large at 1MB and does not load properly after the first request, leaving only a faint overlay on the screen.
All subsequent requests work fine, indicating a potential issue with the gif loading mechanism.
I am seeking a way to preload the animated gif file as hidden and ensure it displays even for the initial request. Any ideas on how to achieve this?