Necesito crear dinámicamente una lista de un par de miles de elementos. Cada elemento de la lista contiene una imagen de aproximadamente medio Kb y algo de texto.

El problema es que la asignación de todas las fuentes de imágenes a los elementos de mi lista, usando el .src de mis elementos <img> , está tomando mucho tiempo y haciendo que la página se atasque por completo durante algunos segundos.

¿Hay alguna manera de que pueda hacer esto de forma asíncrona o más eficiente para que la página no se atasque durante la generación de la lista?

Aquí hay una versión simplificada de mi código. Si elimino la línea con la asignación .src , el código se ejecuta instantáneamente.

 // About a couple thousand elements const item_data = [ {text: "text1", image: "img/image1.png"}, {text: "text2", image: "img/image2.png"}, ... ]; const my_list = document.createElement("ul"); for (const item of item_data) { const list_item = document.createElement("li"); const list_item_text = document.createElement("p"); list_item_text.innerText = item.text; const list_item_image = document.createElement("img"); list_item_image.src = item.image; list_item.appendChild(list_item_text); list_item.appendChild(list_item_image); my_list.appendChild(list_item); } document.body.appendChild(my_list);