The image sequence animation only loads once and does not continue indefinitely

Question

The image sequence animation only loads once and does not continue indefinitely

Here is my code snippet: I have a sequence of 15 images that should load one after the other in a loop with a specific time interval. However, I am facing a bug where the images keep playing infinitely when the page loads, but I want them to play only once. I'm unable to fix this issue, can someone please help me solve it?

onload = function startAnimation() { 
  var frames = document.getElementById("animation").children;
  var frameCount = frames.length;
  var i = 0;
  setInterval(function () { 
      frames[i % frameCount].style.display = "none";
      frames[++i % frameCount].style.display = "block";
  }, 100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation"> 
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png">
</div>

javascript html css

Answer 1

Answer №1

@pratik, here is a helpful solution for you: Using clearInterval in the following way will resolve your issue:

if(j === 15) {
  clearInterval(interval);
}

Check out this example below:

onload = function startAnimation() {
            var animDiv = document.getElementById('animation');
            var x = document.createElement("IMG");
            x.setAttribute("id", 'test');
            x.setAttribute("src",
                "http://jumpingfishes.com/dancingpurpleunicorns/charging01.png");
            animDiv.appendChild(x);

            var i = 1,
                j = 2;
            var interval = setInterval(function () {
                var y = (i < 10) ? '0' + i.toString() : i.toString(),
                    z = (j < 10) ? '0' + j.toString() : j.toString(),
                    url = document.getElementById('test').src;
                document.getElementById('test').src = url.replace(y, z);
                i++;
                j++;
                if (j === 16) {
                    clearInterval(interval);
                }
            }, 100);
        }

#animation img {
  display: none;
}

#animation img:first-child {
  display: block;
}

<div id="animation">

</div>

Answer 2

@pratik, here is a helpful solution for you: Using clearInterval in the following way will resolve your issue:

if(j === 15) {
  clearInterval(interval);
}

Check out this example below:

onload = function startAnimation() {
            var animDiv = document.getElementById('animation');
            var x = document.createElement("IMG");
            x.setAttribute("id", 'test');
            x.setAttribute("src",
                "http://jumpingfishes.com/dancingpurpleunicorns/charging01.png");
            animDiv.appendChild(x);

            var i = 1,
                j = 2;
            var interval = setInterval(function () {
                var y = (i < 10) ? '0' + i.toString() : i.toString(),
                    z = (j < 10) ? '0' + j.toString() : j.toString(),
                    url = document.getElementById('test').src;
                document.getElementById('test').src = url.replace(y, z);
                i++;
                j++;
                if (j === 16) {
                    clearInterval(interval);
                }
            }, 100);
        }

#animation img {
  display: none;
}

#animation img:first-child {
  display: block;
}

<div id="animation">

</div>

Answer 3

Answer №2

To stop the animation, simply use the clearInterval(); function.

onload = function stopAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    var myInterval=setInterval(function () { 
       if(i==frameCount-2){
         clearInterval(myInterval);
        }
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        
    }, 100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>

Answer 4

To stop the animation, simply use the clearInterval(); function.

onload = function stopAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    var myInterval=setInterval(function () { 
       if(i==frameCount-2){
         clearInterval(myInterval);
        }
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        
    }, 100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>

Answer 5

Answer №3

To stop a running interval, be sure to use the clearInterval() method.

Take a look at this sample:

Keep in mind that intervalEnd is the threshold number for stopping the interval once the i value reaches it.

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    var intervalEnd = 100;
    var intervalId = setInterval(function () { 
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        if (i >= intervalEnd)
          clearInterval(intervalId)
    }, 100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>

Answer 6

To stop a running interval, be sure to use the clearInterval() method.

Take a look at this sample:

Keep in mind that intervalEnd is the threshold number for stopping the interval once the i value reaches it.

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    var intervalEnd = 100;
    var intervalId = setInterval(function () { 
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        if (i >= intervalEnd)
          clearInterval(intervalId)
    }, 100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>

The image sequence animation only loads once and does not continue indefinitely

Answer №1

Answer №2

Answer №3

Similar questions

Ensure YouTube iframe remains visible above all other elements on mobile devices at all times

Checkbox selection limitation feature not functioning correctly

Importing a JavaScript file into another JavaScript file

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

Change to the parent frame using webdriver

Emulate clicking a radio button (using PHP and JS)

Is there a way to remove the excess white space beneath my content without resorting to using overflow-y: hidden?

Angular Bootstrap multi-typeahead component glitches

Remove an array key from a MongoDB collection

In the IE7 standards mode, table cells with no content will have a height of 1px

Trouble initiating a jquery function in componentDidMount in a React component

Repeated HTML/CSS Elements with an Eye-Catching Image Header

Toggling dropdown menus with conditional Jquery statements

Using the jasmine framework to create conditional test cases

The animation in Three.js may come to a halt when the "skinning = true" setting is employed alongside THREE.ShaderMaterial

Button to access overlay menu on my map with OpenLayers 3

The type 'MutableRefObject<undefined>' cannot be assigned to the type 'LegacyRef<HTMLDivElement> | undefined'

How can I utilize the Json data retrieved through the findById method in my code?

Building a table with the appendChild() method

How can I align a div in a vertical manner if it is displayed as a circle?