Loading multiple images in a loop and adding listeners to each image

Question

I'm trying to find out if I can do something like this in HTML5 + Javascript. I would also prefer doing this in pure javascript and not use a library like jQuery. Here's an example of what I'm trying to do:

(I come from Lua so please forgive my code, I don't know how to code in Javascript yet but it should be readable so you can understand what I'm trying to do. Thanks in advance and sorry for the trouble)

table = { "Image1", "Image2", "Image3" }
images = {}

for i = 0, 100 do
  images[i] = newImage( "images/" + table[i] + ".png" )
  images[i].x = 30 * i
  images[i].num = i
  images[i].addEventListener( onTouchDown, doSomething )
end

This would load 101 images, take the names of the images from a table and give each image an event listener. Is this possible? Thanks in advance for any information on the topic!

It's possible; unless the actual question is to make the code into working JavaScript :) — Ja͢ck
– Ja͢ck, Commented May 27, 2013 at 3:50
What's the images[i] = 30 * i bit meant to be doing? It replaces the new image stored in images[i] with the number 30 * i, which can't be intended behavior... — Simon M
– Simon M, Commented May 27, 2013 at 3:51
Sorry Simon I meant for it to be the X location. Also Jack I don't need 100% working code, or even code at all, a push in the right direction would be greatly appreciated. As in a link towards something similar but not to the javascript Api — Hate Names
– Hate Names, Commented May 27, 2013 at 3:54

Simon M · Accepted Answer · 2013-05-27 05:03:05Z

1

This creates 3 images using strings in table and appends them to the document.body...

var table = ["Image1", "Image2", "Image3"];
var images = [];

for (var i = 0; i < table.length; i++) {
    images[i] = new Image(); // creates an image
    images[i].src = "images/" + table[i] + ".png"; // gets image location from table
    images[i].style.marginLeft = (i*30)+"px"; // pushes images i*30 pixels to the left

    if (images[i].addEventListener)
        images[i].addEventListener("onTouchDown", function () { /* Do something */ });

    else if (images[i].attachEvent) // addEventListener isn't always supported
        images[i].attachEvent("onTouchDown", function () { /* Do something */ });

    document.body.appendChild(images[i]); // append newly created image to body
}

Here's a JSFiddle...

EDIT: If you want to use position:absolute instead of a margin, replacing the marginLeft line with this should do the trick:

    images[i].style.position = "absolute"; // Sets absolute positioning
    images[i].style.left = (i*30)+"px"; // pushes images i*30 pixels left

For a list of CSS properties that can be altered via Javascript, see this page. But generally all you need to know is this:

Most CSS attributes are represented as properties in the Style object. For non hyphenated attributes, the property is identical, while for hyphenated attributes, drop the hyphen and capitalize the first letter following it. For instance, to manipulate the "background-color" property of CSS via the DOM, the syntax would look something like: document.getElementById("george").style.backgroundColor = "white";

(taken from javascriptkit.com)

edited May 27, 2013 at 5:03

answered May 27, 2013 at 4:05

Simon M

2,9412 gold badges24 silver badges37 bronze badges

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

2 Comments

Hate Names Over a year ago

Thank you so much for the code sample, it looks exactly like what I want. Quick question though, is the marginLeft or paddingLeft my only option for X position? I thought I saw css3 have position absolute and x location solution? Can javascript even control that? Or is marginLeft just a much better practice for any specific reason? Either way thanks a lot for the code sample, really looking forward to testing it and doesn't seem like JS is as complicated as some folks make it out to be, glad it can do something like this relatively easy. Thanks

Simon M Over a year ago

No, it's not your only option. Javascript can control almost any CSS property... I've added an edit with some details.

pdoherty926 · Accepted Answer · 2013-05-27 04:13:45Z

1

Use Event Delegation:

document.getElementById('newDiv').addEventListener('onTouchDown', function (event) {
    if (event.target && event.target.nodeName === 'IMG') {
        console.log(event.target);
    }
});

Fiddle

edited May 27, 2013 at 4:13

answered May 27, 2013 at 3:52

pdoherty926

10.5k5 gold badges47 silver badges75 bronze badges

4 Comments

Hate Names Over a year ago

Thank you for the answer! I do have a few questions if you don't mind me asking. Like I said I don't know javascript yet so please bare with me. This seems like it would look through ALL the elements/objects from the body tag and add listeners to ALL images that exist? So if I create a new div and make a for loop for those 101 images I just created I can do getElementsByTagName('newDiv') and it adds listeners to only those images?

pdoherty926 Over a year ago

Exactly. You'd probably want to give the div and ID and use document.getElementById in that case, though. (I'll update my answer.)

Hate Names Over a year ago

Thank you so much for that. Event Delegation is really interesting, did not know something like that existed, thanks again.

Hate Names Over a year ago

I would very much like to accept your answer, and I feel very bad not doing so because you've showed me something truly amazing. However I think Simon answered the main question and that was adding the event listener directly in the loop =( I really wish I could accept both your answers, really sorry and I can't thank you enough for your help, sorry :(

Collectives™ on Stack Overflow

Loading multiple images in a loop and adding listeners to each image

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related