Estoy creando una función que quiero recorrer a través de una serie de elementos div. Esperar a que se cargue cada imagen de fondo antes de continuar con el ciclo.
Mi solución actual es:
var images = document.getElementsByClassName("previewImg"); for(var i=0; i < images.length; i++){ var imageSrc = images[i].getAttribute("stylesoon"); if(imageSrc != "" || imageSrc != null){ console.log(imageSrc); var imgToLoad = new Image(); imgToLoad.src = "./".imageSrc; imgToLoad.onload = function () { images[i].style.cssText += "background-image: url('"+imageSrc+"');"; } } }El problema es que no está esperando a que se complete la función imgToLoad.onload antes de continuar con el bucle. No estoy seguro de cómo arreglar esto.
Toda ayuda apreciada, gracias.
Las llamadas son asíncronas. Por lo tanto, debe usar async/await con una promesa o debe hacer una cola y sacar una matriz.
(function() { const elems = Array.from(document.querySelectorAll('.previewImg[data-stylesoon]')); function loadNext() { if (!elems.length) { console.log('done'); return; } const elem = elems.pop(); const url = elem.dataset.stylesoon; const img = document.createElement("img"); img.onload = function() { elem.style.backgroundImage = `url('${url}')`; loadNext(); }; img.onerror = loadNext; img.src = url; } loadNext(); }()); div { width: 200px; height: 200px; } <div class="previewImg" data-stylesoon="https://placekitten.com/200/200"> </div> <div class="previewImg" data-stylesoon="https://placekitten.com/200/300"> </div> <div class="previewImg" data-stylesoon="https://placekitten.com/200/400"> </div> <div class="previewImg" data-stylesoon="https://placekitten.com/300/500"> </div>