I need to dynamically create a list of a couple thousand elements. Each list item contains an image of about half a Kb and some text.

The problem is that the assignment of all image sources to my list items, using the .src of my <img> elements, is taking a long time and making the page completely stuck for some seconds.

Is there a way that I could do this maybe asynchronously or more efficiently so that the page doesn't get stuck during the list generation?

Here's a simplified version of my code. If I remove the line with .src assignment, the code runs instantaneously.

// 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);