How can I name a function after the value of a variable?

Question

I have a function that allows you to load a new image. I want that function to make a function that detects when that image is loaded, and store it in an array or object. I have another function that will go through the array or object, and check each to see if it's loaded.

My question is, how can I add each new function to the array, and have each one return whether the image it's set to check is loaded or not?

** edit **

I want to pass a name to the function that loads images, to load 'images/'+name+'.png' and then pass the name to the array or object as the name of the key.

** In reply to Shawn31313: here is the basic for what I have:

var resources = {
    // I have other stuff to load here
    'newImg': function(name) {
        if (name) {
            var img = new Image();
            img.src = 'images/' + name + '.png';
            imgLoadingArray[name] = function () {
                var loaded = false;
                // detect image loading some how
            }
        }
    },
    'imgLoadingArray': {},
    'loaded': function() {
        var loaded = true;
        for (each in game.resources.imgLoadingArray) {
            if (each == 'false') {
                loaded = false;
            }
            return loaded;
        }
    }
}

You wanna add the function itself in the array? Or you want to store the image in an array? Also, what have you tried so far, any other code would be useful. — Shawn31313, Jul 27 '12 at 00:50

score 2 · Answer 1 · answered Jul 27 '12 at 01:28

2

It seems to me that you just need an onload listener on the image that sets a value in an array or object. If each image has a unique name, then:

var imageLoaded = {};

...

'newImg': function(name) { 
    if (name) { 
        var img = new Image(); 
        img.src = 'images/' + name + '.png';
        img.name = name;
        imageLoaded[name] = false;
        img.onload = function() {imageLoaded[this.name] = true;};
        ...
     }
  },
  ...

Untested.

answered Jul 27 '12 at 01:28

RobG

142,382
31
172
209

YES!!! I actually just thought of this a few minutes before I checked back just now, and I was hoping someone had something a bit easier, but this is exactly what I was thinking :D – Tgwizman Jul 27 '12 at 02:24
wait... wouldn't it overwrite the old one if I set a new one before the old one loaded? – Tgwizman Jul 27 '12 at 02:27
Provided each image has a unique name (in the document), then its state is set to a different property with the same name as the image. If the image names aren't unique, then you'll need a different solution, perhaps write a value to the class attribute instead, so instead of `imageLoaded[this.name] = true` you might have `this.className += ' imageLoaded';`. – RobG Jul 27 '12 at 05:11

score 1 · Answer 2 · answered Jul 27 '12 at 00:53

1

You can create a dictionary:

var actions = [];

function createAction(name) {
 actions[name] = function() {alert('Hi from:'+ name);};
}

createAction('hello world');

actions['hello world']();

answered Jul 27 '12 at 00:53

Jason Sperske

29,816
8
73
124

but what about checking if the image is loaded or not? – Tgwizman Jul 27 '12 at 00:54
Would this help? http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript – Jason Sperske Jul 27 '12 at 00:59
I'm not going to be using any libraries in my project – Tgwizman Jul 27 '12 at 01:01
Things could get a little tricky (http://davidwalsh.name/image-load-event) but with some work I'm sure it can be done – Jason Sperske Jul 27 '12 at 01:06
@Tgwizman - What is your motivation for not using libraries? https://en.wikipedia.org/wiki/Not_invented_here NIH Syndrome is counter-productive. – g.d.d.c Jul 27 '12 at 01:08
@g.d.d.c—and your motivation might be the [Law of the Instrument](http://en.wikipedia.org/wiki/Law_of_the_instrument). Each case should be evaluated on its merrits, you haven't provided any logical reason to use a library. – RobG Jul 27 '12 at 01:34
@RobG - I suppose I get wary when I see someone say "I won't be using _any_ libraries in my project." Writing your own code is good. An entire project without libraries is asking to miss an obscure security vulnerability or edge case instability (assuming larger than just hobby level scope). – g.d.d.c Jul 27 '12 at 01:56
@g.d.d.c this falls under the hobby level scope ;) – Tgwizman Jul 27 '12 at 02:23

score 0 · Accepted Answer · answered Jul 27 '12 at 15:10

I just realized... why have a variable at all? Just throw the whole thing into an object for loading!

var resources = {
    // load some other stuff
    'newImg': function(name) {
        if (name) {
            game.resources.imgLoading[name] = new Image();
            game.resources.imgLoading[name].src = 'images/' + name + '.png';
            game.resources.imgLoadedCheck[name] = false;
            game.resources.imgLoading[name].onload = function() {game.resources.imgLoadedCheck[name] = true;};
        }
    },
    'imgLoading': {},
    'imgLoadedCheck': {},
    'loaded': function() {
        var loaded = true;
        for (each in game.resources.imgLoadingArray) {
            if (each == 'false') {
                loaded = false;
            }
            return loaded;
        }
    }
};

How can I name a function after the value of a variable?

3 Answers3