Question

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

图像切片已预加载了javascript函数，但是当我使用第二个javascript函数检索和组合图像切片时，我只是获得占位符而不是图像。预加载图像切片的第一个javascript函数在HTML页面头部的底部调用，并使用查询字符串检索部分图像文件名（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;
}

Answer 1

您遇到的主要问题之一是将preloadImages[r]分配给new Image()，而不是Array。另外，您将preloadImages定义为要用于二维Array的函数和变量（隐式全局）。重命名这些变量并进行一些清理之后，您的代码可以正常运行，如下所示：

document.addEventListener('DOMContentLoaded', function () {

    var queryData = [
        'https://makelin.us/100/100',
        'https://makelin.us/100/100',
        'https://makelin.us/100/100'
    ];
    var preloadImages = [];
    // First function to preload image slices into a two dimensional array.
    function preloadAllImages() {
        var row = 5;
        var col = 5;

        for (var r = 0; r < row; r++) {
            preloadImages[r] = [];
            for (var c = 0; c < col; c++) {
                preloadImages[r][c] = new Image();
                preloadImages[r][c].src = queryData[2];
            }
        }
        // console.log(preloadImages);
    }
    preloadAllImages();

    // 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>";
        // console.log(imageTable);
        assembleImage.innerHTML = imageTable;
        // console.log(assembleImage);
    }
    assembleImage();
});

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="prodImage"></div>
	<script src="script.js">
	</script>
</body>

</html>

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

1 个答案: