javascript - 画像をループで読み取り、ロードを待ちます

Question

jQuery なし

したがって、ページ上のすべての画像をループでチェックする関数が必要です。それらの寸法を取得し、これらを検証する必要があります。

function checkImageInputs() {
    var images = new Array();
    var fileInputs = document.getElementsByClassName('file-input');

    for (var i = 0; i < fileInputs.length; i++) {
        var t = fileInputs[i];
        var ourCell = t.parentNode;

        if (t.files[0]) {
            var file = t.files[0];

            fr = new FileReader();
            fr.onload = createImage;
            fr.readAsDataURL(file);

            function createImage() { // Create Image
                img = document.createElement('img');
                img.src = fr.result;
                img.className = 'file-result';
                ourCell.appendChild(img);
                images[i] = img;
            }
        }
    }

    // I need the images array here
    alert(images.length);
}

ページ上のすべてのファイル入力を操作するために関数にループを追加したとき、必要な結果が返されません。

すべてのalertファイル入力が画像でいっぱいになっている場合でも、0 が返されます。

はfr.onload後で機能を実行しalertます。も同様で、 のourCell.appendChild(img)後に画像が表示されalertます。

alertすべての画像が読み込まれるまで待機するために、実際の画像数を表示するにはどうすればよいですか?

DOM ロード時にこの関数を次のように呼び出します。

var fileInputs = document.getElementsByClassName('file-input');
for (var i = 0; i < fileInputs.length; i++) {
    fileInputs[i].onchange = new Function('checkImageInputs()');
}