javascript - javascript图像数量

Question

我有一个供个人使用的小 html 文件，没有 css 或 php 或 Web 服务器。我有一个文件夹“imgs”（与 .html 位于同一文件夹中），其中包含名为 image0.png、image1.png、image2.png... 的图像（全部按顺序排列，直到没有）。我如何制作一个返回该文件夹中图像数量的 javascript 函数？

Answer 1

没有办法使用客户端 JavaScript 立即获取图像文件的数量，您可以做的最好的事情是尝试逐个检索图像，直到出现 404 错误。

您可以使用onerrorimg 元素的方法来检测请求的图像何时不存在 - 如果您请求的图像不存在，则将调用此方法。

这个问题可能很有用，它包含一些您可以使用的示例代码。

Answer 2

一般的策略是将每个文件加载为图像，按顺序加载，直到请求失败，触发onerror回调。每个后续图像获取都作为onload前一个图像的处理程序被触发。

// takes a callback that expects a single argument
function getImageCount(callback) {
    imageCounter(0);

    // pseduo-recursive function nested in the closure of the outer function
    // (nested so `callback` is always accessible without constantly passing it)
    function imageCounter(i) {
        var img = new Image();

        // if this failed, so the final image was the previous one
        img.onerror = function() { callback(i); }
        // if this succeeded, try the next one
        img.onload = function() { imageCounter(i + 1); }

        img.src = "image"+i+".png";
    }
}

// actually run it, with callback function that gets the count
getImageCount(function(count) {
    alert("There are " + count + "images.");
});

由于 URL 的限制性同源策略file:，这在没有--allow-file-access-from-files命令行标志的 Chrome 上不起作用，并且仅在从当前页面的同一目录或子目录中获取图像时才在 Firefox 中起作用。