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

【问题标题】：Problem with "document.write()" an Image Array in JavaScriptJavaScript 中“document.write()”图像数组的问题
【发布时间】：2011-05-24 03:02:12
【问题描述】：

当时我正在尝试使用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>");
    }

我做错了什么？

【问题讨论】：

如果您使用 Firebug 检查页面，您会发现问题。
顺便说一句，我真的很失望这么多人试图使用没有任何实际用途的“document.write”。这就像尝试使用正则表达式解析 HTML。它伤害了我的眼睛。请不要把它当作私人的；只是一般的想法。
哇，让大家为你做你的项目stackoverflow.com/questions/4419537/…
@epascarello，这是一个公平的观点......现在让我们看看图片的另一面，一个大学学期在英国持续 3 个月。检查我的问题，看看是否有任何（除了今天的2）是关于 JavaScript 的。这使我得到2分； a）因为什么时候在同一天提出 2 个与领域相关的问题是个问题。 b) 你不是说如果我在大学里做 3 个月的 JS，我可能会在这段时间里问更多的问题来让人们做我的工作......但事实并非如此......
...我真的很讨厌那些在不知道实际情况的情况下做假设的人。我是自学 JavaScript，我从未在 SO 中要求快速代码。我也认为你应该考虑这两个问题的背景。在这里，我通过告诉我" 是错误来完成我的“工作”。在前面的问题中，我的“工作”的另一部分通过告诉我在 JS 2D 数组中并不真的存在？？？？就像你说的 WoW...如果要成为一个实际的课程，所有这些都占其中的 95%....我给出这个解释不是为了你，而是为了澄清和尊重其他 SO。跨度>

标签： javascript html multidimensional-array image-manipulation

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

看起来您正在尝试使用new Image() 进行图像预加载，但随后您立即使用document.write() 写出具有相同src 的图像元素，因此图像不会被预加载并且您得到没有好处。我还怀疑您在内循环的一行中缺少.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>");
}

【讨论】：

【解决方案3】：

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

在正文中

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

在您的脚本中，将所有输出收集到一个变量中，比如 contentVariable，然后

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

注意：

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

【讨论】：

是的，当我看到“document.write”而不阅读其余代码时，我只是头晕目眩。只需将它与 scunliffe 的修复程序合并，然后愉快地编写代码 =)