How to refresh or reload a background image not the whole webpage

I have an animated gif that plays spinning gears for 1 second, then stops. I have a static image that loads first and is replaced by the gif when it is clicked so the gears spin. This is done using css and javascript, see code below. It works as intended on the first click but the gif animation does not play on the second click unless the page is refreshed. I don’t want to refresh the whole page as I am using the animated give to display a div below the gears when it is clicked. The gif is placed as a background image. Is it possible to just reload or refresh the gif background image/gif when clicked?

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
    <style>
        #gear-box{
            height: 80x;
            width: 50;
            cursor: pointer;
        }
        .turngears{
        width: 80px;
            height: 50px;
            background: url('image/GearsBaseStatic.png') no-repeat; 
        }
        
        .spingears{
            width: 80px;
            height: 50px;
            background: url('image/GearsBase.gif') no-repeat;
            background-size:74px 45px;
            
        }
        
    </style>
<body>

    <div id="gear-box">
    <div id="gears" class="turngears">
    </div>
        
    </div>
<div>

    <script>
    var gear = document.getElementById('gears');
        
        gear.addEventListener('click',function(gear){
            gear.target.classList.toggle('spingears')
        })

</script>
</body>
</html>  

Answer

You can force a reload of just the gif by adding a parameter to the end of the url which changes each time.

In this snippet the background image url has a ?update= added. On each click an extra character is added to it which will force the browser to get another copy of the image when that class is used. A more sophisticated version would add a digit 1 so we don’t end up with huge string of characters, but whether that matters depends on the use case – how many clicks are likely.

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
    <style id="gearstyle">
        #gear-box{
            height: 80x;
            width: 50;
            cursor: pointer;
        }
        .turngears{
        width: 80px;
            height: 50px;
            background: url('https://i.stack.imgur.com/noWxL.jpg') no-repeat; 
        }
        
        .spingears{
            width: 80px;
            height: 50px;
            background: url('https://i.stack.imgur.com/Ewreb.giff?update=1') no-repeat;
            background-size:74px 45px;           
        }
        
    </style>
</head>
<body>

  <div id="gear-box">
    <div id="gears" class="turngears">
    </div>    
  </div>
<div>
<script>
let gears = document.getElementById('gears');
let gearStyle = document.getElementById('gearstyle');
gears.addEventListener('click',function(event){
  gears.classList.toggle('spingears');
  gearStyle.innerHTML = gearStyle.innerHTML.replace('?update=','?update=1'); //puts another character onto the version string
})
</script>
</body>

Leave a Reply

Your email address will not be published. Required fields are marked *