Preload heavy gif image-CodePudding

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?

CodePudding user response：

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.