Javascript 通过AJAX请求创建图像后，等待图像加载

我通过AJAX请求获得了74个图像文件。我正在将它们加载到数组中。然后我调用函数changeMargins来更改一些样式。问题是，当图像尚未全部加载并准备就绪时调用该函数

imageArray = new Array();     

$.ajax({
  url: url,
  success: function (data) {
    counter = 0
    $(data).find("a").attr("href", function (i, val) {
      if (val.match(/\.(jpe?g|png|GIF)$/)) { 
        imageArray[counter]= new imageItem(url + val)
        ++counter;  
      }
    });

    changeMargins(imageArray);

---

我如何才能等待AJAX和图像元素上的所有加载事件完成，然后继续处理？

这个问题最好的解决方法可能是明确图像加载过程，即创建一个承诺，在加载图像时解决

有一个设计决定要做。。。a是接受加载错误，还是b允许任何单个错误导致整个过程失败

假设a，您可以这样写：

function loadImages() {
    return $.ajax({
        url: url,
        // other ajax params?
    }).then(function(data) {
        return $.Deferred(function(dfrd) { // promisify the entire image loading proceess
            var imageArray = [];
            var counter = 0; // tally of images that have either loaded or failed to load
            $(data).find('a').get().map(function(element) {
                // map a elements in data to an array of their hrefs
                return element.href;
            }).filter(function (href) {
                // filter out any non-jpe?g|png|GIF 
                return href.match(/\.(jpe?g|png|GIF)$/);
            }).forEach(function(val) {
                // for each match, create a Image() object, push onto the array, attach onload and onerror handlers, and set the `src` attribute.
                var img = new Image();
                imageArray.push(img);
                img.onload = function loadHandler() {
                    counter += 1;
                    if(counter == images.length) {
                        dfrd.resolve(imageArray);
                    }
                };
                img.onerror = function errorHandler() {
                    console.log(new Error('image ' + url + val + ' failed to load'));
                    // Here, you might choose to splice failed Images out of `imageArray`.
                    counter += 1;
                    if(counter == images.length) {
                        dfrd.resolve(imageArray);
                    }
                };
                img.src = url + val;
            });
        });
    }).then(function(imageArray) {
        changeMargins(imageArray);
        return imageArray;
    });
}

注:

更典型的情况是，人们会选择在最低级别（即每个图像）单独承诺，但承诺相当昂贵，因此对于74个图像，最好是集体承诺。 通过承诺，并从loadImages返回一个承诺，它的调用者将被告知流程已完成-您可以链接loadImages。然后。。。并在图像加载/失败时执行操作。

---

将对changeMargins的调用放在success callback内的success callbackprocess内，或者从success callback调用函数，或者发现jQuery使用Promise/a-，然后使用.then方法-选项为yours@Rory，现时的问题是甚么？我没找到。它在你问题顶部的一个黄色盒子里。您可能需要刷新以查看it@Rory，如果我将changeMargins放在成功回调中，您确定它在加载所有图像时执行吗？