Javascript 如何显示二维数组中预加载的图像切片而不是占位符？

我试图组装和显示已预加载到二维数组中的图像片段，但代码仅显示占位符而不是图像

图像片段已经预装了一个javascript函数，但是当我使用第二个javascript函数来检索和组装图像片段时，我得到的只是占位符而不是图像。用于预加载图像切片的第一个javascript函数在HTML页面的head部分底部调用，并使用查询字符串检索部分图像文件名（queryData[2]），用于组装图像的第二个javascript函数位于body标记中，称为onload=assembleImage（）；。我在两个函数中都使用了console.log，这两个函数都显示了图像片段的存在。为什么我只获取占位符而不获取图像？我的代码如下

// First function to preload image slices into a two dimensional array.


function preloadImages(){

    preloadImages = [];
    var row = 5;
    var col = 5;

    for (var r = 0; r < row; r++){
        preloadImages[r] = new Image();
        for (var c = 0; c < col; c++){
            preloadImages[r][c] = new Image();
            preloadImages[r][c].src = queryData[2] + "_" + (r) + "_" + (c) + ".jpg";    
        }
    }
    //console.log(preloadImages[r][c]);
}

// Second function to retrieve and assemble image slices.

function assembleImage(){   

    var row = 5;
    var col = 5;
    var assembleImage = document.getElementById("prodImage");
    var imageTable = "<table>";

    for (var r = 0; r < row; r++){
        imageTable += "<tr>";
            for (var c = 0; c < col; c++){
                imageTable += "<td>";
                imageTable += "<img src = " + preloadImages[r][c].src + "/>";
                imageTable += "</td>";

            console.log(preloadImages[r][c])
            }
        imageTable += "</tr>";
    }
    imageTable += "</table>";
    assembleImage.innerHTML = imageTable;
}

//将图像切片预加载到二维数组中的第一个函数。
函数preload images（）{
预加载图像=[]；
var行=5；
var-col=5；
对于（var r=0；r

您遇到的主要问题之一是将

预加载图像[r]

分配给

新图像（）

，而不是

数组。此外，您还将
preload images
定义为用于二维
数组的函数和变量（隐式全局）。重命名这些变量并进行一些清理后，代码运行良好，如下所示：


document.addEventListener（'DOMContentLoaded'，函数（）{
变量queryData=[
'https://makelin.us/100/100',
'https://makelin.us/100/100',
'https://makelin.us/100/100'
];
var=[]；
//将图像切片预加载到二维数组中的第一个函数。
函数predallimages（）{
var行=5；
var-col=5；
对于（var r=0；r

答复