Question

我当前正在设置一个数组来预加载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属性。

Answer 1

imageArray 是您使用此for循环填充的空数组：

select @@VERSION

Microsoft SQL Server 2016 (SP1-CU10-GDR) (KB4293808) - 13.0.4522.0 (X64)   Jul 17 2018 22:41:29   Copyright (c) Microsoft Corporation  Enterprise Edition (64-bit) on Windows Server 2012 R2 Datacenter 6.3 <X64> (Build 9600: ) (Hypervisor)

要引用此数组中的特定元素，请使用一个名为 arrayIndex 的全局变量-您也可以在此循环中增加该变量。此循环完成后，此变量的值将保留其最后一个值。

稍后，在 assemble（）函数中，您将重用此变量，而无需将其重置为零并在循环中再次将其递增。

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);
}

尝试以下方法：

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

Answer 2

一些技巧

如果将新映像.push插入数组，则根本不需要在预加载器函数中使用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>';
  }
}

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

2 个答案: