Question

我有四个html元素，其中与服务器的速度不同会产生不同数量的内容（文本和图像）。只有在所有内容都出现在所有元素之后，我才能展示他们的内容？

我想最初显示占位符，只有当我准备好为用户展示所有内容时才删除它们。

Answer 1

虽然我发现这个随机图像API非常慢，但这对于演示是有益的。您可以按如下方式处理;

＆＃13;

var imgPrs = Array.from({length: 4})
                  .map(_ => fetch("https://unsplash.it/300/400/?random").then(res => res.blob()));
Promise.all(imgPrs)
  .then(blob => document.querySelectorAll("#container img")
                        .forEach((img, i) => img.src = (window.URL || window.webkitURL).createObjectURL(blob[i])));

＆＃13;

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  width: 80vw;
  height: 60vw;
  background-color: #000;
  box-sizing: border-box;
}

.tl {
  width: 45%;
  height: 45%;
  background-color: #ccc;
}

.tr {
  width: 45%;
  height: 45%;
  background-color: #bbb;
}

.bl {
  width: 45%;
  height: 45%;
  background-color: #aaa;
}

.br {
  width: 45%;
  height: 45%;
  background-color: #999;
}

＆＃13;

<div id="container">
  <img class="tl">
  <img class="tr">
  <img class="bl">
  <img class="br">
</div>

＆＃13;

内容下载同步

1 个答案: