javascript - JavaScript画像数

Question

css、php、またはWebサーバーを使用しない、個人用の小さなhtmlファイルがあります。image0.png、image1.png、image2.png ...という画像を含む「imgs」フォルダー（.htmlと同じフォルダー内）があります（何もなくなるまで、すべて順番に）。そのフォルダ内の画像の数を返す JavaScript 関数を作成するにはどうすればよいですか?

Answer 1

一般的な戦略は、リクエストが失敗するまで、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:、これはコマンドラインフラグがないとChromeで機能しません--allow-file-access-from-files。また、Firefoxで機能するのは、画像が現在のページの同じディレクトリまたはサブディレクトリからフェッチされている場合のみです。

Answer 2

クライアント側のJavaScriptを使用して画像ファイルの数をすぐに取得する方法はありません。最善の方法は、404エラーが発生するまで画像を1つずつ取得してみることです。

img要素のメソッドを使用してonerror、要求された画像が存在しないことを検出できます。このメソッドは、存在しない画像を要求した場合に呼び出されます。

この質問は役に立つかもしれません、それはあなたが使うことができるいくつかのサンプルコードを含んでいます。