Javascript multiple images loader

Question

I want to make a javascript image loader.

This is what I try :

function ImgLoader() {

   this.imgs_ = {
       0 : {name: "floor", img: new Image()},
       1 : {name: "highlight", img: new Image()},
       2 : {name: "player-north", img: new Image()},
       3 : {name: "player-south", img: new Image()},
       4 : {name: "player-west", img: new Image()},
       5 : {name: "player-east", img: new Image()},
       6 : {name: "food_small", img: new Image()},
       7 : {name: "food_medium", img: new Image()},
       8 : {name: "food_large", img: new Image()},
   };

}

 ImgLoader.prototype.load = function() {

 for (var i = 0; typeof(this.imgs_[i]) != "undefined"; i++)
     this.imgs_[i].img.src = "img/" + this.imgs_[i].name + ".png";
 }

With this method, I have an "array" of my images, and I can work easily later with. But, it appears that sometimes, few images are not fully loaded.

What is the best way to make this kind of loader ?

Thanks !

Okay Šime Vidas said a very good solution ... BUT : We can not be certain that the image is fully loaded !

This is the code :

var imgs = Object.create( null ); // or var imgs = {};

[
   'floor',
   'highlight',
   'player-north',
   'player-south',
   'player-west',
   'player-east',
   'food_small',
   'food_medium',
   'food_large'
].forEach(function ( name ) {
    var img = new Image;
    img.src = 'img/' + name + '.png';
    imgs[ name ] = img;
});

Use is :

imgs.food_small;

But if I check Image complete Property like this

console.log(imgs.food_small.complete);

Sometimes we can seen : false

I think we should wait for an event like 'onload' before load the next image in the forEach

you mean they are not fully loaded before you add them into the html, or they won't appear at all on the rendered page? — dano
– dano, Commented Jul 3, 2012 at 20:29
Also why not make it a real array so that you don't need to check typeof, and you can use the length property eg. this.imgs_ = [ {"name":"floor","img":new Image()}, {"name":"highlight","img":new Image()} ] — dano
– dano, Commented Jul 3, 2012 at 20:31
Notice how all those img: new Image() parts violate DRY. You don't need to hard-code all those. Instead, you can create new images dynamically (inside a loop). — Šime Vidas
– Šime Vidas, Commented Jul 3, 2012 at 20:35
I know how to create Image dynamically ;) Indeed, I use all this image to draw in html canvas. So, I need to have an "Image object" ... — user1499872
– user1499872, Commented Jul 3, 2012 at 20:45

Šime Vidas · Accepted Answer · 2012-07-03 21:21:17Z

1

This is how I'd do it:

var imgs = Object.create( null ); // or var imgs = {};

[
    'floor',
    'highlight',
    'player-north',
    'player-south',
    'player-west',
    'player-east',
    'food_small',
    'food_medium',
    'food_large'
].forEach(function ( name ) {
    var img = new Image;
    img.src = 'img/' + name + '.png';
    imgs[ name ] = img;
});

Now you can retrieve each individual image like so:

imgs.food_small

For instance:

ctx.drawImage( imgs.food_small, 0, 0 );

edited Jul 3, 2012 at 21:21

answered Jul 3, 2012 at 20:33

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

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

3 Comments

user1499872 Over a year ago

Yes it's a pretty good idea, but how can I retrieve the preloaded food_small image to draw it in my canvas ? (for example)

user1499872 Over a year ago

Wow ! Very nice :) Thank you very Much Šime Vidas ! Great Idea ! Just a little question ... What is the difference between new Object(); and Object.create(null); ?

Šime Vidas Over a year ago

@user1499872 Object.create(null) creates and object that doesn't inherit anything. In contrast, normal objects inherit from Object.prototype. Since imgs is used as a hash, it's best to have it not inherit anything. (Note, though, that Object.create and .forEach aren't implemented in IE8, so you would have to provide ES5-shim).

Mike · Accepted Answer · 2012-07-03 20:31:43Z

0

First, insert this function as is

function preload(arrayOfImages) {
            $(arrayOfImages).each(function(){
                $('<img/>')[0].src = this;
            });
        }

To Use it, insert all images into the below function.

jQuery(document).ready(function(){
    preload([
        '/images/image1.png',
        '/images/image2.png'
    ]); 
});

answered Jul 3, 2012 at 20:31

Mike

7812 gold badges7 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript multiple images loader

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related