Tengo una lista de matriz de direcciones URL de imágenes. Quiero obtener un ancho y alto de imagen, para hacerlo, uso:
const url = 'https://via.placeholder.com/350x150' const img = new Image() img.addEventListener('load', function () { const isWide = img.width > img.height const isTall = img.height > img.width console.log(url, isWide, isTall, img.width, img.height) // <--- WORKS FINE img.src = url }) Tengo una lista de imágenes donde quiero extraerlas todas en Promise.all(arrayOfImageUrls) .
¿Cómo lo haría Promesa para que espere a que se completen todas las direcciones URL en la matriz de imágenes?
Aquí está mi código que no funciona, simplemente ignora la "espera" y activa la función incluso antes de que termine:
const array = [ "https://via.placeholder.com/350x150", "https://via.placeholder.com/650x250", "https://via.placeholder.com/350x150", "https://via.placeholder.com/650x250", "https://via.placeholder.com/150x550", "https://via.placeholder.com/510x450", "https://via.placeholder.com/800x800" ] function doSomethingAsync(url) { return new Promise((resolve) => { const img = new Image() img.addEventListener('load', function() { const isWide = img.width > img.height const isTall = img.height > img.width img.src = url resolve({ url, isWide, isTall }) }) }) } async function doAsync() { const promises = [] array.forEach(url => { promises.push(doSomethingAsync(url)) }) console.log('before promise all') const results = await Promise.all(promises) console.log('after promise all', results) } doAsync()Debe poner img.src = url antes de esperar a que se carguen las imágenes, no dentro del controlador de carga. Actualmente está esperando que se carguen imágenes sin src .
const array = [ "https://via.placeholder.com/350x150", "https://via.placeholder.com/650x250", "https://via.placeholder.com/150x550", "https://via.placeholder.com/510x450", "https://via.placeholder.com/800x800" ] function doSomethingAsync(url) { return new Promise((resolve) => { const img = new Image(); img.src = url; // <--- Move this line here img.addEventListener('load', function() { const isWide = img.width > img.height const isTall = img.height > img.width resolve({ url, isWide, isTall }) }) }) } async function doAsync() { const promises = [] array.forEach(url => { promises.push(doSomethingAsync(url)) }) console.log('before promise all') const results = await Promise.all(promises) console.log('after promise all', results) } doAsync()