如何让 Javascript 在继续之前等待所有图像加载？

Question

我是 Javascript 的新手，我目前正在尝试以各种尺寸和位置显示图像。这意味着我必须先加载图像，然后才能访问宽度和高度等值。 现在，这就是我面临的问题。

我尝试一个接一个地加载图片，确保只有在一张图片完成后才会加载另一张图片。

const a = new Image();
const b = new Image();

const images = [
    a,
    b
];
const imageLinks = [
    'a.png',
    'b.png'
];

let loaded = 0;
for (let i = 0; i < images.length; i++) {
    images[i].onload = function() {
        console.log(images[i].width);
        console.log(images[i].height);
        loaded++;
    }
    images[i].src = imageLinks[i];
}

console.log(images[0].width);
console.log(images[0].height);

显然，这不会产生正确的结果。 for 循环之后的 Logs 仍然为 0，并在 for 循环内部的 Logs 之前打印。这意味着，程序不会等待图像完成。

接下来，我尝试了这个：

let loaded = 0;
while (loaded < images.length) {
    images[loaded].onload = function() {
        console.log(images[loaded].width);
        console.log(images[loaded].height);
        loaded++;
    }
    images[loaded].src = imageLinks[loaded];
}

console.log(images[0].width);
console.log(images[0].height);

这更糟。该页面甚至没有首先加载，它似乎永远停留在 while 循环中。这是有道理的，因为我认为每次设置

images[loaded].src

时，加载过程都会重新开始，因此永远不会取得任何进展。

我发现的任何解决方案都包括 HTML 代码，其中图像是通过 document.querySelector() 从 HTML 加载的，我无法使用，或者对于我来说太复杂了，以至于我作为一个刚开始的人都无法理解出去。我不需要完美的解决方案，现在我只需要可行的东西。不可能那么复杂，对吧？我只想加载一些图像。我真的被困在这里了。

Answer 1

欢迎， loaded++ 在 onload 里面。

这可能就是它不起作用的原因。不值得按顺序上传图片。异步编程会比阻塞有更好的效果

async function create() {
var i=0
var arr = [{data:'1'},{data:'2'},{data:'3'},{data:'4'},{data:'5'}]

while(i<arr.length) {
console.log('create', arr[i])
await read(arr[i])
i++
}}

async function read(val) {
console.log('read',val)
}

create()

或

async function* reader() {
  while (true) {
    const value = yield;
    console.log(value, '-----generator');
  }
}

const read = reader();
var i =0
var arr = [{data:'1'},{data:'2'},{data:'3'},{data:'4'},{data:'5'}]
read.next(0) //first value not return

async function create() {
while(i<arr.length) {
await read.next(arr[i]); 
console.log(arr[i], '-----loop');

i++
}
}
create()

现在不要来等待它还在进行中

对不起英语我用翻译器

Answer 2

const images = [...document.querySelectorAll("div img")];

const proms=images.map(im=>new Promise(res=>
 im.onload=()=>res([im.width,im.height])
))

// list all image widths and heights _after_ the images have loaded:
Promise.all(proms).then(console.log)

// everything is set up here, except, the images don't have a `src` attribute yet. 
// That is added now:

images.forEach(im=>im.src="https://picsum.photos/200/300");

<div><img><img></div>