javascript - 循环对象以预加载图像列表

Question

我有一个对象，它带有我想在显示之前预加载的图像。

信息存储如下：

 //var data =     ["images",{"ground":["0.png"]}]

然后我想用 onLoad 循环它们以确保它们已加载，因此它们将显示......但它们不会显示在第一帧上......并且我确定它是因为 onLoad 检查。

这就是我所拥有的：

function preLoad(data){
    gfx = new Array();
    count = 0;
    for(var i in data[1]){
        if (data[1].hasOwnProperty(i)) {
            ++count;

            gfx[i] = new Array();
            for(var j in data[1][i]){
                tmp = new Image();
                    tmp.onload = function(){
                        tmp.src = data[0]+'/'+data[1][i][j];
                        gfx[i].push(tmp);               
                }
            }           
        }   
    }

    window.gph = gfx;

    main();
}

我做对了吗？

Answer 1

你需要

a) 复制到 onload 内的数组，但
b) 在分配 onload 后加载 onload 之外的 src

for(var j in data[1][i]){
  tmp = new Image();
  tmp.onload = function(){
    gfx[i].push(tmp);               
  }
  tmp.src = data[0]+'/'+data[1][i][j];
}  

最后，通常的做法是在 for in 中使用 o 或 obj 作为 var，在普通 for 循环中使用 i，如

for(var o in data[1])

和

for (var i=0;i<array.length;i++)

整个东西有点味道，gfx 没有 var，然后您将其复制到 windows 范围的 var

怎么样

function preLoad(obj){
  var data = obj[1], path=obj[0],tmp;
  window.gph = {};
  for(var o in data){
    if (data[o].hasOwnProperty(i)) {
      gph[o] = [];
      for(var p in data[o]){
        tmp = new Image();
        tmp.onload = function(){
          gph[o].push(tmp);               
        }
        tmp.src = path+'/'+data[o][p];
      }           
    }   
  }
  main();
}

Answer 2

尝试在 onload 事件之前分配 src 属性，而不是在其中：

for(var j in data[1][i]){
    tmp = new Image();
    tmp.src = data[0]+'/'+data[1][i][j];
    tmp.onload = function(){
        gfx[i].push(tmp);               
    }
}