Javascript 我正在数组中预加载图像，无法调用“.src”属性？

我目前正在设置一个数组来预加载20个已经成功的图像，但是现在我想调用这个数组来将图像组装到一个表中。 最好的方法是什么？ 因为它给了我一个错误，即.src的属性未定义

//This is the function that is currently preloading the array of images.

var imageArray = new Array();
var arrayIndex = 0;

function preloader() {
for(var r = 0; r < rows; r++) {
    for(var c = 0; c < cols; c++) {
        imageArray[arrayIndex] = new Image();
        imageArray[arrayIndex].src = "../images/bcpot00" + img + "/bcpot00" + img + "_r" + (r+1) + "_c" + (c+1) + ".jpg";
        arrayIndex++;
        console.dir(imageArray);
    }
  }
}  

//This is the function that is currently assembling the images.

function assemble() {
    for(var r = 0; r < rows; r++) {

            table += '<tr>';

                for(var c = 0; c < cols; c++) {
                    table += '<td id = "jsImg">';
                    table += '<img height = 50px width = 65px src = ' + 
                    imageArray[arrayIndex].src + '>';
                    table += '</td>';
                }

            table += '</tr>';
}

我希望在输入'imageArray[arrayIndex].src'时它会从数组中调用源，但它给我的只是一个未定义的src属性。

imageArray是一个空数组，您正在使用此for循环填充它：

for(var c = 0; c < cols; c++) {
    imageArray[arrayIndex] = new Image();
    imageArray[arrayIndex].src = "../images/bcpot00" + img + "/bcpot00" + img + "_r" + (r+1) + "_c" + (c+1) + ".jpg";
    arrayIndex++;
    console.dir(imageArray);
}

要引用这个数组中的一个特定元素，需要使用一个名为arrayIndex的全局变量，这个变量在这个循环中也是递增的。 此循环完成后，此变量的值将保留其最后一个值

稍后在汇编函数中，您将重用此变量，而不会将其重置为零并在循环中再次递增

        for(var c = 0; c < cols; c++) {
            table += '<td id = "jsImg">';
            table += '<img height = 50px width = 65px src = ' + 
            imageArray[arrayIndex].src + '>';
            table += '</td>';
        }

请尝试以下方法：

function assemble() {
  arrayIndex = 0;
  for (var r = 0; r < rows; r++) {

    table += '<tr>';

    for (var c = 0; c < cols; c++) {
      table += '<td id = "jsImg">';
      table += '<img height = 50px width = 65px src = ' +
        imageArray[arrayIndex].src + '>';
      table += '</td>';
      arrayIndex++;
    }

    table += '</tr>';
  }
}

只是一些提示

如果将新图像推送到数组中，则不需要在预加载函数中使用arrayIndex变量

var imageArray = [];

function preloader() {
  for(var r = 0; r < rows; r++) {
    for(var c = 0; c < cols; c++) {
      var pic = new Image();
      pic.src = "../images/bcpot00" + img + "/bcpot00" + img + "_r" + (r+1) + "_c" + (c+1) + ".jpg";
      imageArray.push(pic);
    }
  }
}

然后在汇编函数中，您可以轻松地从r和c变量计算arrayIndex

function assemble() {
  for(var r = 0; r < rows; r++) {
    table += '<tr>';
    for(var c = 0; c < cols; c++) {
      var arrayIndex = r * cols + c;
      table += '<td id = "jsImg">';
      table += '<img height = 50px width = 65px src = ' 
        + imageArray[arrayIndex].src + '>';
      table += '</td>';
    }
    table += '</tr>';
  }
}

---

imageArray[arrayIndex].src+'>'；应该是imageArray[r].src+'>'？还是c？或者，我错过了arrayIndex？哇，非常感谢你。我已经在这上面呆了很久了。非常感谢，没问题！很高兴我能帮忙=