deldalton Posted September 16, 2013 Share Posted September 16, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted September 16, 2013 Share Posted September 16, 2013 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. Link to comment Share on other sites More sharing options...
deldalton Posted September 17, 2013 Author Share Posted September 17, 2013 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! Link to comment Share on other sites More sharing options...
deldalton Posted September 17, 2013 Author Share Posted September 17, 2013 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? Link to comment Share on other sites More sharing options...
deldalton Posted September 17, 2013 Author Share Posted September 17, 2013 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 17, 2013 Share Posted September 17, 2013 Try with quotes around function call in setinterval imgAniTimer = setInterval('changeAniImg()', 500); and make sure path to images is correct. 1 Link to comment Share on other sites More sharing options...
deldalton Posted September 17, 2013 Author Share Posted September 17, 2013 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! Link to comment Share on other sites More sharing options...
thescientist Posted September 17, 2013 Share Posted September 17, 2013 it's better to pass by reference typically. For your case, simply having used setTimeout(changeAniImg, 500); would also have worked. 1 Link to comment Share on other sites More sharing options...
deldalton Posted September 17, 2013 Author Share Posted September 17, 2013 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. Link to comment Share on other sites More sharing options...
thescientist Posted September 17, 2013 Share Posted September 17, 2013 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 Link to comment Share on other sites More sharing options...
deldalton Posted September 18, 2013 Author Share Posted September 18, 2013 Thanks. I'll take a look into it. Link to comment Share on other sites More sharing options...
Ingolme Posted September 18, 2013 Share Posted September 18, 2013 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now