Javascript 内容下载同步

我有四个html元素，其中以不同的速度从服务器发送不同数量的内容（文本和图像）。只有在所有元素都包含了所有内容之后，我如何才能显示它们的内容

---

我想首先显示占位符，只有当我准备好所有内容向用户显示时才删除占位符。

虽然我发现这个随机图像API速度慢得令人痛苦，但它适合演示。你可以采取以下方法

var-imgPrs=Array.from（{length:4}）
.map（=>fetch（“https://unsplash.it/300/400/?random）然后（res=>res.blob（））；
承诺。全部（imgPrs）
.then（blob=>document.querySelectorAll（“#容器img”）
.forEach（（img，i）=>img.src=（window.URL | | window.webkitURL）.createObjectURL（blob[i]）
#容器{
显示器：flex；
柔性包装：包装；
对正内容：空间均匀；
对齐项目：居中；
宽度：80vw；
高度：60vw；
背景色：#000；
框大小：边框框；
}
.tl{
宽度：45%；
身高：45%；
背景色：#ccc；
}
.tr{
宽度：45%；
身高：45%；
背景色：#bbb；
}
.bl{
宽度：45%；
身高：45%；
背景色：#aaa；
}
.br{
宽度：45%；
身高：45%；
背景色：#999；
}

是否预加载您的内容？如果唯一的问题是图像延迟（即，您的文本立即由服务器呈现），则只预加载图像-有许多经过良好尝试的解决方案可用于使用image.onload调用来聚合下载，直到您拥有所有下载，然后触发所有下载的dom呈现。您可以使用
Promise.all（）
dude，这非常缓慢，你需要一个旋转器；）