Creating several image objects in JavaScript

Question

I'm programming in JavaScript and I would like to know if there is a 'best' method of creating multiple image objects. Take the code below as an example.

var a = new Image();
var b = new Image();
var c = new Image();

Is this the only way to do it, or should I do something like...

var a = new Image(), b = a, c = a;

I'm just wondering if there is a different way of doing the first method. I find my program contains a lot more 'new Image()' variables, and I thought being repetitive was bad for the code.

Best as in most common? Best as in fastest? Best as in uses the least amount of code? Define best. — j08691
– j08691, Commented Nov 16, 2012 at 1:41
'Best' as in a way to organize the code so that maybe there is less code to work with and helps speeds the code a little. — JaPerk14
– JaPerk14, Commented Nov 16, 2012 at 1:45
Basically this approach in most languages will make a shallow copy - you will get a lot of variables pointing to the same object. And another concern is - if the objects, which you've created are immutable. — Bakudan
– Bakudan, Commented Nov 16, 2012 at 1:46

RadicalRaid · Accepted Answer · 2012-11-16 02:04:53Z

2

I'm not sure I understand your question correctly. I don't believe there is anything wrong with declaring three variables as three different new Image() at all, if the code requires it. In fact, I'm very much for it, because it makes the code more readable in my opinion.

However, if you're set on doing it somewhat different you could try this:

var a = new Image(), b = a.cloneNode( true ), c = a.cloneNode( true );

I don't think this is very readable though.

You could also try initialising them in a list which is probably the preferred method, if the code allows this.

var images = [];
for( var index = 0; index < 10; index++ ) {
    images.push( new Image() );
}

edited Nov 16, 2012 at 2:04

answered Nov 16, 2012 at 1:45

RadicalRaid

1,00510 silver badges17 bronze badges

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

1 Comment

Paul S. Over a year ago

It needs some more clicks but this test case suggests .cloneNode() marginally beats new Image() in ops/sec.

Michael Berkowski · Accepted Answer · 2012-11-16 01:56:53Z

1

I would probably build them as an array, rather than pollute your namespace with a pile of separate variables pointing to different Image objects.

var imgs = [];
var numImgs = 10;
// In a loop, build up an array of Image objs
for (var i=0; i<numImgs; i++) {
  imgs.push(new Image());
  // Initialize properties here if necessary
  imgs[i].src = 'http://example.com';
}
// imgs now holds ten Image objects...
// Access them via their [n] index
img[3].src = 'http://stackoverflow.com';

This isn't going to be much more or less efficient than creating multiple variables, but it is certainly easier to keep them organized. You will save a few lines of code in initializing them, but in the long run, that amounts to a micro-optimization which will have only negligible effect.

Note that if you really want a text descriptor for each Image, you could opt to use an object {} instead of an Array [] and set its properties to small descriptive strings. You could even initialize it via an array:

var imgNames = ['stackoverflow','google','example'];
var imgs = {}
// Initialize object properties in a loop
for (var i=0; i<imgNames; i++) {
  // Initialize a property in the object from the current array value using [] notation
  imgs[imgNames[i]] = new Image();
}
// Then you can access them by their property name:
imgs.google.src = 'http://www.google.com';
imgs.stackoverflow.src = 'http://stackoverflow.com';

This borders a little on misuse of the object to behave like a PHP or Perl associative array, but will provide easy access to the images if you need them by name rather than a numeric key as in the array method above.

edited Nov 16, 2012 at 1:56

answered Nov 16, 2012 at 1:43

Michael Berkowski

271k47 gold badges452 silver badges395 bronze badges

2 Comments

JaPerk14 Over a year ago

How would you go about adding a .src to an image with this approach? would it be something like imgs[0].src = ""?

Michael Berkowski Over a year ago

@JaPerk14 Yes, exactly, see above.

LetterEh · Accepted Answer · 2012-11-16 02:04:30Z

The second way is the same image.

If you say that:

b = a;
c = b;

And if a is an object, then b and c are just references which point to the same object.

How about making a function to load an image?

function loadImage(name, optionalCallback) {
    var img = new Image();
    if (typeof optionalCallback === "function") { img.onload = optionalCallback; }
    img.src = name;

    return img;
}

Then you can say:

var a = loadImage("images/image01.png", function () { document.body.appendChild(this); }),
    b = loadImage("images/image02.jpg", function () { gallery.addImage(this); });

There's a lot more that you can do with this, when you get further along -- when you get into Promises and whatnot, you can do an awful lot with those images.

Also, you might want to be careful if you're writing a program that looks like:

var a = new Image();
a.src = "images/image01.jpg";
document.getElementById("gallery").appendChild(a);

If you get to the part of the code where you're adding the image to the page, before the image is done loading, then you might get unexpected results.

Collectives™ on Stack Overflow

Creating several image objects in JavaScript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related