Set HTML <img> element to Javascript image variable

Question

I have an array of image variables that get preloaded using javascript to make an image sequence animation. The issue I have is setting the img element from HTML to use one of these images. It seems all the properies are strings?

Here's how I set the array of images in javascript:

for(var i = 0; i < 30; i ++){
    anim[i] = new Image();
    if(i < 10){
        anim[i].src = "images/anim/frame0" + i + ".png";
    }
    if(i >= 10){
        anim[i].src = "images/anim/frame" + i + ".png";
    }
}

and I simply have an ^img tag = "animation"^ in html that I want to change.

I would probably use some CSS keyframes for creating an animation if the images are not dynamically created or fetched from database. See: w3schools.com/css/css3_animations.asp You won't need javascript for that and it would be much faster and smoother — Dawid Zbiński
– Dawid Zbiński, Commented Apr 7, 2017 at 12:06
My only concern with that is it's surely going to have to fetch the image every time I change the animation frame, with no preloading? — Josh Lyness
– Josh Lyness, Commented Apr 7, 2017 at 12:10

Koam · Accepted Answer · 2017-04-07 12:20:23Z

2

Your code looks valid.

for(var i = 0; i < 30; i++){
    anim[i] = new Image();

    if(i < 10){
        anim[i].src = `images/anim/frame0${i}.png`;
    }

    if(i >= 10){
        anim[i].src = `images/anim/frame${i}.png`;
    }
}

Now you can do: document.body.appendChild(anim[0]);

I tested this and it works for me.

If you want to change src on the fly then you'd have to select the appended element and update its src like this: document.querySelectorAll('img')[0].src = newSourceVariable;.

edited Apr 7, 2017 at 12:20

answered Apr 7, 2017 at 12:11

Koam

465 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Josh Lyness Over a year ago

oh awesome, and i'll need to delete the old image object right?

Josh Lyness Over a year ago

is there any way to just replace the old image? It has some properties that I need it to keep, as well as a parallax scroll function that uses the original object.

Koam Over a year ago

Yes, either delete the old image (not recommended because you'll have flickering animation) or update the src by selecting the already appended image. With jQuery you'd do $('img').eq(0).attr('src', newSource); to replace the src of already existing image.

Koam Over a year ago

With pure JS you'd do: document.querySelectorAll('img')[0].src = newSourceVariable; - it will select the appended image and replace the src of already existing image. You can do this in a loop as well.

Josh Lyness Over a year ago

So after a few more days of trying I've got it working using AppendChild. Thanks bud :)

Collectives™ on Stack Overflow

Set HTML <img> element to Javascript image variable

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related