javascript - 将图像一张一张地添加到表格中

标签 javascript arrays image

有人可以告诉我如何将图像从数组(称为 preLoadArray)一一加载到表格单元格中吗?该表的单元格为 13 x 4。 该函数旨在增加图像 ID 并回调自身以使用短 setTimeout() 添加它们,以延迟该过程并使其动画化。任何帮助,将不胜感激。谢谢。

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>");
}

最佳答案

如果您直接指定图像的 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>

关于javascript - 将图像一张一张地添加到表格中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37428481/

相关文章:

javascript - 从服务器上的 Meteor 集合中获取项目会抛出 "Can' t wait without Fiber”

PHP语法高亮代码编辑器

arrays - Angular 将带有字段的 API JSON 响应对象转换为数组

javascript - Tab 按键不会改变焦点元素

javascript - 无法从构造函数调用方法

arrays - 使用相同的模式重新排序输入,直到它变回原始顺序

javascript - 序列化 JSON 数组并将其解析为数组

css - 在较小的 div 中垂直居中图像(多个缩放图像,多个 div)

jquery - 悬停缩略图时,文本会顺利显示。这是一个 jQuery 插件还是只是 CSS?

html - 填充 100% 宽度和高度时将图像居中放置在 div 中