Animated pictures in JavaScript, problem: flickering screen and resizing

Question

As I mentioned in the title I have a problem properly embedding my animation in my Django project.

At some point, I decided to update the logo used by my web page built-in Django. Having small experience with JavaScript I was looking for approaches that fit my needs. I built an animation engine having some inspiration from this StackOverflow answer. (Thanks to user gilly3).

My approach is, though, different in this topic because I realised that if I would have a lot of pictures then sticking/concatenating them together in one file might be difficult. I've decided to use another approach and use a bunch of files instead of one. For that sake, I built a function with a generator which I could call in another function to display all pictures in order. This animation engine looks like this:

function* indexGenerator() {
    let index = 1;
    while (index < 28) {
        yield index++;
    }
    if (index = 28)
        yield* indexGenerator();
  };

var number = indexGenerator();


setInterval(function animationslider()
{
    var file = "<img src=\"../../../static/my_project/logos/media/slides_banner_f/slide_" + number.next().value + ".jpg\" />";
    document.getElementById("animation-slider").innerHTML = file;
    
    $("#animation-slider").fadeIn(1000);
    
    
}, 100);

$("#animation-slider").fadeIn(1000); doesn't do the trick with values from 10-1000. I record what this looks like: https://youtu.be/RVBtLbBArh0

I suspect that the solution to the first relocation problem can be solved using CSS, but I don't know how to do it, yet.

The blinking/flickering of the animation is probably caused by loading all these images one by one. In the example video above, there are 28 of them. I wonder if this content would be loaded asynchronously (e.g. using Ajax) would it solve the problem? Is it possible to load all and after all is loaded, then display the animation (some sort of preloading)? I will be grateful for all suggestions and hints.

I'm aware that in the topic mentioned by me before there is a solution. But I'm curious about other approaches.

score 0 · Accepted Answer · answered Nov 16 '22 at 20:07

0

At the moment, from what I checked, the best method would be to convert pictures to the format:

APNG
WebP which seems to be better quality.
GIF

Having that kind of file, there is no problem with loading and flickering.

answered Nov 16 '22 at 20:07

Paweł Pedryc

368
2
5
19

gilly3 · Answer 2 · 2022-11-22T18:20:06.947

The flickering is the time it takes to create the dom element, insert it into your page, make the web request to download the image, and final render the image. That's too much work to do in the moment you want to animate the next frame! It would look even worse running from a client with a poor connection to the server.

To solve this, preload all of the images. This is the benefit of a sprite - it loads all at once by its very nature. But, if you have individual images, you can still preload them. Just hide them all at first, and show them one by one.

One way you can show them one at a time, is to set up a style that hides all but the first child image. Then, to animate, move the first image to the end of the list.

#animation-slider img ~ img {
    display: none;
}

const animationContainer = document.getElementById("animation-slider");
for (let i = 0; i < 28; i++) {
    const img = document.createElement("img");
    img.src = `../../../static/my_project/logos/media/slides_banner_f/slide_${i}.jpg`;
    animationContainer.appendChild(img);
}

addEventListener("load", () => {
    setInterval(() => animationContainer.appendChild(animationContainer.children[0]), 100);
});

Here's a working example, using my own image:

const animationContainer = document.getElementById("animation-slider");
for (let i = 1; i < 16; i++) {
    const img = document.createElement("img");
    img.src = `https://jumpingfishes.com/dancingpurpleunicorns/charging${i.toString().padStart(2, "0")}.png`;
    animationContainer.appendChild(img);
}

addEventListener("load", () => {
    setInterval(() => animationContainer.appendChild(animationContainer.children[0]), 100);
});

#animation-slider img ~ img {
    display: none;
}

<div id="animation-slider"></div>

But even having the snippet that you share here, even in this snippet the image also is flickering at the beginning (at least on my pc). It was the reason that I was looking for other options. I heard that there is some sort of library that can concatenate images into one image (like in the example from your past previous post - I mean your "first approach". But, the library I mentioned here for some reason didn't work with my shell. It's called **ImageMagick**. I will try to implement APNG/WebP tomorrow. Maybe I will ask on STO about this ImageMagick too... — Paweł Pedryc, Nov 17 '22 at 00:43
For multiple images over a slow connection, wait for the window's load event before starting the animation. I've edited my code snippet above to include waiting for the load event. Or, just concatenate the images into a single image. This is the ideal approach. There are endless ways of joining your images together. Photoshop, the gimp, irfanview, write your own software to do it, load all the images into a webpage and take a screenshot are just a few ways you could try. Then follow the guidance from my previous post. — gilly3, Nov 22 '22 at 18:16

Animated pictures in JavaScript, problem: flickering screen and resizing

2 Answers2

Linked