动态加载图像，打破图像错误循环

Question

我试图将图像动态加载到表中，而不必使用服务器端代码。它可以工作，但是我希望能够有一个无限循环，当图片无法加载时该循环会中断，而不是硬编码所需的行数。这样，我就不必更新代码，如果要扩展表格，只需将图片添加到文件夹中即可。

现在，“ onerror”属性隐藏了失败的图像，但是我也想突破外循环（loop1）。

function headCatalogLoader() {
var table = document.getElementById("catalog");
var meshNum = 0;
var uniqueID = 0;

loop1:
for (var i = 0; i <= 50; i++) {  // i made it 50 instead of infinite for now
    var row = table.insertRow(i);

    loop2:
    for (var k = 0; k <= 2; k++) {      // 2 is because 3 columns
        var skinTone = "none";
        var cell = row.insertCell(k);

        if (k == 0) {
            skinTone = "lgt";
        }
        else if (k == 1) {
            skinTone = "med";
        }
        else if (k == 2) {
            skinTone = "drk";
        }

        cell.innerHTML = "<img src=\"headimgs/head" + skinTone + meshNum + ".png\" id=\"head" + uniqueID + skinTone + "\" onclick=\"previewIt(this)\" onerror=\"$(this).hide();\" />";

        uniqueID++;
    }
    meshNum++;
}
var tbody = $("table tbody");
tbody.html($("tr",tbody).get().reverse());
}

从属性内部中断超出了循环范围，并且不起作用。也使用

$('img').on("error", function () {
    break loop1;
});

inside loop2不执行任何操作。任何帮助或建议都很棒！