0

I am displaying animated GIF image as loader in the web page using below code. It's working fine. Loader image has animation which plays for 3 seconds and then stops and stays non-animated.

<style>
    .content {display:none;}
    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('../images/loader.gif?random=323527528432525.24234') 50% 50% no-repeat rgb(0,0,0, 0.90); }
</style>
<script>
    setTimeout(function(){ 
        $('.loader').css('display', 'none'); 
    }, 5000);
</script>

Now, when page is loaded first time or reloaded using CTRL+F5, animated GIF is displaying from start to end. For rest of the time, whenever page is refreshed, it just shows non-animated part of the loader image due to browser's caching.

To resolve caching issue, I have tried following things but no one is working.

#1 - I have attached random number as a query string after image name shown as below.

background: url('../images/loader.gif?random=1234.5678')

#2 - HTML headers to not to cache pages are mentioned as below:

<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">

Am I missing something more or else? Or is it not caching issue? Please advise.

RK Ahir
  • 105
  • 9
  • _"it just shows non-animated part of the loader image due to browser's caching"_... how do you know it's because of browser caching? – Phil Dec 16 '20 at 03:21
  • @Phil, Whenever I refresh page using `CTRL+F5`, animated GIF loads from start but then when I refresh it normally, it just shows last non-animated part of the gif. So I guess this is caching issue. – RK Ahir Dec 16 '20 at 03:22
  • 1
    Are you changing that `random` parameter each time the page loads? – Phil Dec 16 '20 at 03:23
  • @Phil No, I don't change the random parameter each time the page loads. – RK Ahir Dec 16 '20 at 03:24
  • Then that's your problem. See the linked post, there are server-side and client-side examples to try out – Phil Dec 16 '20 at 03:25
  • @Phil, Ohh... it works now... please post your answer so i can accept. Ty very much. – RK Ahir Dec 16 '20 at 03:31
  • 1
    You can accept the duplicate as having answered your question. This doesn't need another answer. Don't forget to upvote the answer(s) that work for you – Phil Dec 16 '20 at 03:32

0 Answers0