J'ai quatre éléments html, dans lesquels à différentes vitesses du serveur vient une quantité différente de contenu (texte et images). Comment puis-je montrer leur contenu seulement après que tout le contenu est venu à tous les éléments?Synchronisation de téléchargement de contenu
Je souhaite d'abord afficher des espaces réservés et les supprimer uniquement lorsque tout le contenu est prêt à être affiché par l'utilisateur.
Bien que je trouve cette image aléatoire API douloureusement lente, il est bon pour une démonstration. Vous pouvez vous approcher comme suit.
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])));#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;
}<div id="container">
<img class="tl">
<img class="tr">
<img class="bl">
<img class="br">
</div>mec, c'est vraiment lent, vous avez besoin d'un spinner;) – Xlee
votre contenu? Si le seul problème concerne les retards d'image (c'est-à-dire que votre texte est instantanément rendu par le serveur), préchargez les images. Il existe de nombreuses solutions éprouvées pour utiliser les appels image.onload pour regrouper les téléchargements jusqu'à ce que vous les récupériez. –
Vous pouvez utiliser 'Promise.all()' – Redu