[SOLVED] Changing Image src By Time Using Array

[deldalton]

Good day,

 

I appreciate that this is a popular query but I've been searching the web for answers and I've been unable to get my code to work.

 

I'm trying to create the effect of an animated button on a website. I have a div which contains an <img/>. This image is the "animated button". I have already prepared the additional images to represent the following frames.

 

Now, the JavaScript code I have (which I've pulled together looking at examples) is below.

var navAniButton;var aniImgs;var imgAniTimer;var index;var maxImages; function updateVar() {navAniButton = document.getElementById("navAniButton");aniImgs = ["images/Frame1.png", "images/Frame2.png", "images/Frame3.png", "images/Frame4.png", "images/Frame5.png", "images/Frame6.png", "images/Frame7.png", "images/Frame8.png"];imgAniTimer = setInterval(changeAniImg(), 500);index = 0;maxImages = aniImgs.length - 1;} function changeAniImg() {var curAniImg = aniImgs[index];index = (index == maxImages) ? 0 : ++index;navAniButton.src =curAniImg;}

The updateVar(); function is called in the body "onload" to update the global variables.

 

When the page is loaded the image src is loaded correctly and then it appears that the JavaScript attempts to change the src, because the image changes to a cross (you know, as if it can't locate the file). But, I can't figure out why it does this.

 

I've opened the debugger and, originally, it advised that the maxImages variable had not been defined. It hadn't. So, I amended that, but now I'm not receiving any errors in the console.

 

I apologise if I've missed something extremely obvious or if I'm omitted something that would help you all out. Let me know if I can help at all.

Edited September 17, 2013 by deldalton

[justsomeguy]

Make sure to check the network tab also, to make sure that the requests are going out for the images and that they are not 404 or something else.

 

Other than that, I would recommend using a sprite image with all frames in it instead of individual images for each frame. There's going to be a delay while the browser downloads those images. If you use a sprite then there's only one image. You can use CSS to control which part of the image it displays, so you can define the frames as coordinates on the image instead of individual filenames.

[deldalton]

justsomeguy. Thanks for the suggestion.

 

So, I've checked the network tab. I can't see that any of the images have been downloaded or that there was even an attempt. The only entry I can see that may be relevant is one that states that the download was initiated by an update to the src attribute of an img element. It then states that the download occurred during the processing of the document. Unfortunately, I can't work out much else from it.

 

The updateVar(); function, called by the body 'onload', updates the variables and provides the aniImgs with an array of file locations. It definitely tries to change the image, as it swaps from the original image to a cross, as described before. But, as I mentioned above, it doesn't even look like it's trying to download the images.

 

I've even tried defining the array straight away, rather than using the updateVar(); function to update it later. But, it doesn't download them then either.

 

I've been meaning to use sprite sheets and CSS for some time so I will look into this. That may, in fact, be a work around as the JS would be changing the CSS rather than the src attribute of the element.

 

I'd still really like to get this method working too though.

 

Any other hints or suggestions would be really appreciated!

[deldalton]

justsomeguy. Additionally, I just read one of your posts in response to another thread ...

 

Looking at the source code shows what was downloaded from the server, not the current state of the page. You'll need to use your browser's developer tools if you want to be able to inspect the "live" DOM that it is actually rendering. They would use Javascript to change things on the page.

 

So, of course, I've now checked that the src of the img element has, in fact, been updated. And ... it does. It gets updated to "undefined". So, either the browser isn't downloading the .png files in the array or the JS is somehow sending an undefined value.

 

Because the network tab doesn't suggest it has downloaded the images then that would be my suggestion. But, I still don't know why?

[deldalton]

I've tried creating a bunch of CSS classes that take advantage of the sprite sheet. So, I passed these into the array instead and had it update the class of the element. I'm receiving exactly the same result again where the class is now updating to "undefined".

 

I'm left feeling that there problem is with the JS and the array but I can't see the problem.

[dsonesuk]

Try with quotes around function call in setinterval

imgAniTimer = setInterval('changeAniImg()', 500);

and make sure path to images is correct.

[deldalton]

Try with quotes around function call in setinterval

imgAniTimer = setInterval('changeAniImg()', 500);

and make sure path to images is correct.

 

dsonesuk. Thank you. The problem was the missing single quotations around the function name. I'm disappointed it was something so simple but I really appreciate the help.

 

Thank you very much!

[thescientist]

it's better to pass by reference typically. For your case, simply having used

 

setTimeout(changeAniImg, 500);

 

would also have worked.

[deldalton]

it's better to pass by reference typically. For your case, simply having used

setTimeout(changeAniImg, 500);

would also have worked.

 

thescientist. Just tested your solution and this does also work. Thank you for taking the time to respond.

 

 

You've stated that it's better to pass by reference. Can you expand on that and explain the difference between using

setInterval(changeAniImg, 500);

and

setInterval('changeAniImg()', 500);

?

 

Only if, of course, it's actually as simple as that.

[thescientist]

in the first example, you are actually passing the function, or rather a reference to it, to setTimeout.

 

in the second example, you are passing a string, of the function being called. The second example would require setTimeout to eval() the string to call the function, and in general, eval() is bad.

 

here's a little more background on setTimeout.

https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout

[deldalton]

Thanks. I'll take a look into it.

[Ingolme]

The reason passing a string as a parameter is bad is because the browser has to go through the Javascript parsing, compiling and executing phases again.