Javascript 读取循环中的图像，等待加载

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

---

它是异步的，因此在执行createImage回调之前执行长度计算语句。我注意到的另一件事是，您正在使用循环迭代变量设置数组

images

的值，其中包含一个条件。因此，任何与条件不匹配的内容都会在该索引处的数组中创建一个洞，因此数组的长度不会反映数组中的实际项数。因此，请改用array.push，最好使用数组文字而不是数组构造函数。除非你真的想知道图像是否存在

所以试着这样做：

function checkImageInputs(callback) { //take a callback argument
    var images = [],
       fileInputs = document.getElementsByClassName('file-input'),
       left = 0;
    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];
            left++; //increment the count
            var fr = new FileReader(); //If you don't specify a var keyword here fr becomes global
            fr.onload = createImage.bind(this, i); //bind the iteration variable here
            fr.readAsDataURL(file);

            function createImage(itr) { // Create Image
                var img = document.createElement('img'); //If you don't specify a var keyword here img becomes global
                img.src = fr.result;
                img.className = 'file-result';
                ourCell.appendChild(img);
                images.push(img);
                left--; //decrement left count
                if(!left) { //check if this is the last one
                  callback(images); //now make the call back
                }
            }
        }
    }


}

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

checkImageInputs(postProcess); //provide the callback as argument here.

到

---

它是异步的，因此在执行createImage回调之前执行长度计算语句。我注意到的另一件事是，您正在使用循环迭代变量设置数组

images

的值，其中包含一个条件。因此，任何与条件不匹配的内容都会在该索引处的数组中创建一个洞，因此数组的长度不会反映数组中的实际项数。因此，请改用array.push，最好使用数组文字而不是数组构造函数。除非你真的想知道图像是否存在

所以试着这样做：

function checkImageInputs(callback) { //take a callback argument
    var images = [],
       fileInputs = document.getElementsByClassName('file-input'),
       left = 0;
    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];
            left++; //increment the count
            var fr = new FileReader(); //If you don't specify a var keyword here fr becomes global
            fr.onload = createImage.bind(this, i); //bind the iteration variable here
            fr.readAsDataURL(file);

            function createImage(itr) { // Create Image
                var img = document.createElement('img'); //If you don't specify a var keyword here img becomes global
                img.src = fr.result;
                img.className = 'file-result';
                ourCell.appendChild(img);
                images.push(img);
                left--; //decrement left count
                if(!left) { //check if this is the last one
                  callback(images); //now make the call back
                }
            }
        }
    }


}

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

checkImageInputs(postProcess); //provide the callback as argument here.

到

---

1

您似乎忘记了

var

您的一些变量，

2

而不是使用FileReader，利用文件从Blob继承的事实，调用它。这为您节省了大量的时间和精力

3

你不能

alert

在那里-这是在异步代码完成之前。

1

你似乎忘记了

var

你的一些变量，

2

而不是使用FileReader，利用事实文件继承自Blob，调用它。这为您节省了大量的时间和精力<代码>3你不能

在那里发出警报

这是在异步代码完成之前。我不确定这是否有效，因为只有在（t.files[0]）的情况下才加载文件。因此，您实际上可能在等待比加载更多的图像。或者，如果没有使用最后一个

文件输入

，则永远不会调用回调。@PaulGrime在这种情况下，他可以锁定并使用creatImage中的计数器为每个回调执行递增它，并将其与i进行比较。这也是他可以使用的一个选项，我写这篇文章不是为了涵盖所有的场景，这可以帮助OP自己写。我当然理解。但是，可以帮助指出一些潜在的困难。使用closure选项更新了答案，以防bind对您不起作用。它起作用，但并不总是如此。当我加载页面并添加一个图像时，它不会发出任何警报，只有当我在第二次输入中再添加一个图像时，它才会发出警报2。我不确定这是否有效，因为该文件只加载了

if（t.files[0]）

。因此，您实际上可能在等待比加载更多的图像。或者，如果没有使用最后一个

文件输入

，则永远不会调用回调。@PaulGrime在这种情况下，他可以锁定并使用creatImage中的计数器为每个回调执行递增它，并将其与i进行比较。这也是他可以使用的一个选项，我写这篇文章不是为了涵盖所有的场景，这可以帮助OP自己写。我当然理解。但是，可以帮助指出一些潜在的困难。使用closure选项更新了答案，以防bind对您不起作用。它起作用，但并不总是如此。当我加载页面并添加一个图像时，它不会发出任何警报，只有当我在第二次输入中再添加一个图像时，它才会发出警报2。

fr.onload = createImage.bind(this, i);

fr.onload = (function(i){
            return function(){
                createImage(i);
            }              
        })(i);