如何进行多个图像源分配而不会使页面卡住？

问：

我需要动态创建一个包含几千个元素的列表。每个列表项都包含一个大约半 Kb 的图像和一些文本。

问题是，使用我的元素将所有图像源分配给我的列表项需要很长时间，并使页面完全卡住几秒钟。.src<img>

有没有办法可以异步或更有效地做到这一点，这样页面就不会在列表生成过程中卡住？

这是我的代码的简化版本。如果我删除带有赋值的行，代码会立即运行。.src

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