javascript - 动态加载图像，错误时中断循环

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

loop2 内部不做任何事情。有人建议我使用递归方法并重写我的函数，但这对我不起作用，因为我正在动态创建一个表并使用与循环对应的图像名称。任何帮助或建议都会很棒!

Answer 1

我想您可以使用 XMLHttpRequest 来检查该 URL 的响应，然后再尝试将它放到页面上。如果状态不是 404，则插入图像 else break 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";
                    }

                    // note: you'll need to use an absolute path for imageUrl
                    var imageUrl = "http://example.co.uk/example/headimgs/head" + skinTone + meshNum + ".png";
                    var xhttp = new XMLHttpRequest();
                    xhttp.open('HEAD', imageUrl, false);
                    xhttp.send();

                    if (xhttp.status !== 404) {
                        cell.innerHTML = "<img src=" + imageUrl + " id=\"head" + uniqueID + skinTone + "\" onclick=\"previewIt(this)\" onerror=\"$(this).hide();\" />";
                        uniqueID++;
                    } else {
                        break loop1;
                    }
                }
            meshNum++;
        }
    var tbody = $("table tbody");
    tbody.html($("tr", tbody).get().reverse());
}

注意:您需要为 XMLHttpRequest 使用绝对路径。我刚刚使用了 example.co.uk/example 因为我不知道你的 URL。

我猜你只是希望它在找不到图像时出错，因为这表明你已经到达文件夹中的最后一张图像，这就是我检查 !== 404 的原因，如果你想在任何错误的情况下中断(例如500 internal server error)，最好更改if (xhttp.status !== 404 ) 到 if (xhttp.status === 200)。