“document.write()”的问题JavaScript 中的图像数组

Question

我当时尝试使用 document.write() 从我的数组中写入图像。但是它没有显示任何...

// *** Temporal variables
    var i = 0;
    var j = 0;
    var x = 0;

    // Create basic linear array
    var ImgArray = []

    // Do the 2D array for each or the linear array slots
    for (i=0; i < 4 ; i++) {
        ImgArray[i] = []
    }

    // Load the images
    x = 0;
    for(i=0; i < 4 ; i++) { 
        for(j=0; j < 4 ; j++) { 
          ImgArray[i][j] = new Image();
          ImgArray[i][j] = "Images/" + x + ".jpg";
          document.write("<img id= " + x + " img src=ImgArray[i][j]  width='120'   height='120'/>");
          x = x + 1;
        }
        document.write("<br>");
    }

我做错了什么？

Answer 1

看起来你的 JavaScript 不太正确......

document.write('<img id="' + x + '" src="' + ImgArray[i][j] + '" width="120" height="120"/>');

Answer 2

看起来您正在尝试使用 new Image() 进行图像预加载，但随后您立即使用 document 写出具有相同 src 的图像元素.write()，因此图像不会预加载，并且您不会获得任何好处。我还怀疑您在内循环的一行中缺少 .src ：

ImgArray[i][j].src = "Images/" + x + ".jpg";

生成 HTML 时最好在服务器端完成创建图像元素的循环，但假设这不是一个选项，您可能会完全丢失 ImgArray 变量：

x = 0;
for(i=0; i < 4; i++) { 
    for(j=0; j < 4; j++) { 
        document.write("<img id='" + x + "' src='Images/" + x + ".jpg' width='120' height='120'>");
        x = x + 1;
    }
    document.write("<br>");
}

Answer 3

document.write 将任何输入写入脚本元素的位置。尝试这样做：

在脚本的正文中

<div id="imageContainer"></div>

，将所有输出收集到一个变量，例如 contentVariable，然后

document.getElementById("imageContainer").innerHTML = contentVariable;

注意：

使用 document.write 甚至 inertml 将元素附加到 dom 是不好的做法。使用 document.createElement 和 element.appendChild 进行 dom 操作。