Javascript array key value as a variable

Question

I am trying to set up an array of keys that are strings instead of numbers. But, when I try to do so, the array ends up null.

Here is the function that works (where the keys are just a simple number "i":

function loadImages(arr, data, callBack){
                var count = 0;
                var img = new Array();

                for(var i in arr ){
                    var src = "\""+arr[i]+"\"";

                    img[i] = new Image();
                    img[i].src = arr[i];
                    img[i].onload = function(){
                        count++;
                        if(count == arr.length){
                            callBack(data, img);
                        }
                    }
                }
            } 

Here is the function I am attempting to use but the resulting array is null:

function loadImages(arr, data, callBack){
                var count = 0;
                var img = new Array();

                for(var i in arr ){
                    var src = "\""+arr[i]+"\"";

                    img[src] = new Image();
                    img[src].src = arr[i];
                    img[src].onload = function(){
                        count++;
                        if(count == arr.length){
                            callBack(data, img);
                        }
                    }
                }
            } 

I have tried defining "src" in the following ways too:

var src = arr[i];

var src = "'"+arr[i]+"'";

Does anyone know why it is resulting in null?

Answer 1

Javascript arrays are not good to be used for an enumerated array. That is what you are trying to do here. Use Object instead.

Then you can use a string as a key.

function loadImages( arr, data, callBack )
{
  var nCount = 0 ;
  var oImg = new Object() ;

  for ( i = 0; i < arr.lenght; i++ )
  {
    var sSrc = "\"" +arr[ i ]+ "\"" ;

    oImg[ sSrc ] = new Image() ;
    oImg[ sSrc ].src = arr[ i ] ;
    oImg[ sSrc ].onload = function()
                          {
                            count++;
                            if ( count == arr.length )
                            {
                              callBack( data, oImg ) ;
                              alert( oImg ) ;
                            }
                          }
  }
}

Answer 2

JAVASCRIPT

function loadImages(arr, data, callBack){
                var count = 0;
                var img = new Array();
                for(i=0; i<arr.lenght; i++ ){
                    var src = "\"" +arr[i]+ "\"";

                    img[src] = new Image();
                    img[src].src = arr[i];
                    img[src].onload = function(){
                        count++;
                        if(count == arr.length){
                            callBack(data, img);
                            alert(img);
                        }
                    }
                }
            }

Try this..