Inhalt Download Synchronisation

Question

Ich habe vier HTML-Elemente, in denen mit unterschiedlicher Geschwindigkeit vom Server kommt eine andere Menge an Inhalten (Text und Bilder). Wie kann ich ihren Inhalt erst anzeigen, nachdem alle Inhalte zu allen Elementen gekommen sind?

Ich möchte zunächst Platzhalter anzeigen, und entfernen Sie sie nur, wenn ich alle Inhalte bereit für den Benutzer anzeigen lassen.

Answer 1

Während ich dieses zufällige Bild API schmerzhaft langsam finde, ist es gut für eine Demonstration. Sie können wie folgt vorgehen;

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>