Question

有人可以建议我如何将数组（称为preLoadArray）中的图像逐个加载到表格单元格中。该表是13 x 4个单元格。该函数用于递增图像ID并回调自身以使用短的setTimeout（）来添加它们以延迟该过程＆amp;让它动画。任何帮助，将不胜感激。谢谢。

function showCard(){
//when button is clicked
document.writeln("<table>");
    for (m = 0; m < 4; m++) {
    document.writeln("<tr>");
    for (n = 0; n < 13; n++) {
        preLoadImages[n] = new Image();
        preLoadImages[n].src = n + '.gif'; 

        document.writeln("<td id=\"\"><img height=\"80\" id=\"" + preLoadImages[(m * 13) + n] + "\" \"></td>");
        }
        document.writeln("</tr>");
    }
    document.writeln("</table>");
}

Answer 1

javascript document.writeln()中没有此类方法，可能您打算使用document.write()。但不建议使用此功能。最好使用innerHTML或.appendChild：

function showCard() {
  var t = "<table>"
  for (m = 0; m < 4; m++) {
    t += "<tr>";
    for (n = 0; n < 13; n++) {
      preLoadImages[n] = new Image();
      preLoadImages[n].src = n + '.gif';

      t += "<td id=\"\"><img height=\"80\" id=\"" + preLoadImages[(m * 13) + n] + "\" \"></td>";
    }
    t += "</tr>";
  }
  t += "</table>";

  document.innerHTML = t;

}

Answer 2

如果你直接指定他们的src，你不需要在任何数组中预加载图像。

这是一个可以帮助您的代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script>
        function showCard() {

            var t = "<table><thead></thead><tbody>";
            for (m = 0; m < 4; m++) {
                t += "<tr>";
                for (n = 0; n < 4; n++) {              

                    t += "<td><img height=\"80\" width=\"80\" src=\"" +  ((m * 4) + n) + ".jpg\"/></td>";
                }
                t += "</tr>";
            }
            t += "</tbody></table>";

            document.getElementById("ll").innerHTML = t;
        }
    </script>
  </head>
  <body onload="showCard();">
    <div id="ll"></div>
  </body>
</html>

逐个将图像添加到表中

2 个答案: