Why is it that when the image is fully loaded, it still renders when inserted into the DOM?

Question

JavaScript

So it goes.

I have a bunch of pictures that change dynamically.
Before using, I load each:

let i = 1;
            function loadImage () {
                let img = new Image();
                img.onload = () => {
                    if (i === count) {
                        resolve();
                    } else {
                        i++;
                        loadImage();
                    }
                };
                img.src = path;
            }
            loadImage();

And when I insert them directly into the DOM, they start rendering! Moreover, many of them are rendered partially and this is terribly annoying.

What can be done about it?

Answer 1

This is how browsers work.
I usually did this:
The browser does not render the same image a second time, but takes the old one.