将 img.onload 与 img.src 链接到 Image() 对象

Question

我有一个函数能够通过 foreach(item) 迭代读取“图像链接”数组。在每次迭代中，我都试图：在Image() 对象中加载图像，并在 onload 事件中获取属性（naturalWidth 和naturalHeight）并将其粘贴到 DOM 中作为<DIV> 的背景。

但是 img.onload 是异步的，在 onload 事件粘贴之前，所有迭代都会通过。

如何在每次迭代中创建连续的 img.onload 链和更改 img.src？

function singleGrid() {
  galdiv1.className = galClassList;

  function imgFill() {
    arr.forEach(function(item) {
      img = new Image();
      img.onload = function() {
        var nHeight = this.naturalHeight;
        var nWidth = this.naturalWidth;
        var res = nWidth / nHeight;
        console.log("image source: " + arr[i] + ", naturalWidth: " + nWidth + "px, naturalHeight: " + nHeight + "px");
        blockres = width * res;
        var div = divCreate(blockres);
        galdiv1.append(div);
      };
      img.src = item;##
      Heading##
    }, this);
  }
  imgFill();
}

Answer 1

var imageURLS = [];
var imageTags = [];

// Runs once when all images are loaded
function onAllImagesLoaded() {

}

// Individual image loaded Successfully
function onImageLoad() {
    this.hasLoaded = true;

    for (var i = 0; i < imageTags.length; ++i) {
        if (!imageTags[i].hasLoaded) {
            return; // Exit the function if any image hasn't loaded yet
        }
    }

    onAllImagesLoaded();
}

// Individual image failed to load
function onImageError() {
    console.warn("Error: image " + this.id + " could not be retrieved");
    this.hasLoaded = true;

    for (var i = 0; i < imageTags.length; ++i) {
        if (!imageTags[i].hasLoaded) {
            return;
        }
    }

    onAllImagesLoaded();
}

function loadImages() {
    var newImageTag = null;

    for (var i = 0; i < imageURLS.length; ++i) {
        newImageTag = new Image();
        newImageTag.id = i; // Give each Image a unique identifier (Helps to find ones that don't load properly if you have any problems)
        newImageTag.hasLoaded = false; // Add new 'hasLoaded' flag
        newImageTag.onload = onImageLoad; // Set event handlers, It's better to use an existing function instead of an inlined one
        newImageTag.onerror = onImageError; // This is because an inlined function will create a closure when called
        newImageTag.src = imageURLS[i]; // This starts the async loading
        imageTags.push(newImageTag);
    }
}