Tengo una aplicación que necesita generar un par de miles de imágenes. La forma en que lo hago es con un conjunto de png precargados (que actúan como capas transparentes) y un lienzo fuera de la pantalla. Dibujo las imágenes en el lienzo, las convierto en un blob y luego escribo la imagen en un div usando una clase personalizada llamada Imágenes.

Primero quiero mostrar una barra de carga y borrar las imágenes antiguas, pero hay un retraso de 3 a 5 segundos antes de que se actualice el dom, aunque el código "vacío()" y "mostrar()" se encuentra al comienzo de la solicitud de clic. .

¿Hay algo que esté haciendo mal con respecto a la asincronía o las promesas que hacen que el dom no se actualice de inmediato?

Aquí hay algo del código:

 // Generate Images $("#generate_images").click(function(){ // Show loading bar $("#progress_bar .progress-bar").css("width", "0%"); $("#progress_bar").show(0); // Show loading spinner $("#loading").show(0); $("#images").empty(); console.log("Generating Images"); $.each(images, function(id, image){ // Sort traits (png layers) var traits = Object.values(image.traits).sort((a, b) => { return a.z_index - b.z_index; }); images[id].layers = []; $.each(traits, function(trait_idx, trait){ images[id].layers.push(preloaded_images[trait.variant_id]) }); }); // Create canvas var canvas = new OffscreenCanvas(1200, 1200); var context = canvas.getContext("2d"); console.log("Generating canvases."); $.each(images, function(id, image){ // Clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); // Draw each image layer $.each(images.layers, function(src, layer){ context.drawImage(layer, 0, 0); }); // Add imageData to screen canvas.convertToBlob().then(function(blob) { // Do something with the blob like render to the screen }); }); });

Cualquier idea sobre cómo hacer esto más eficiente también sería apreciada.