콘텐츠 다운로드 동기화

Question

나는 서버와 다른 속도로 다른 양의 콘텐츠 (텍스트 및 이미지)가 나오는 네 가지 html 요소가 있습니다. 모든 콘텐츠가 모든 요소에 도달 한 후에야 어떻게 콘텐츠를 보여줄 수 있습니까?

처음에는 자리 표시자를 표시하고 모든 콘텐츠를 사용자에게 표시 할 준비가되었을 때만 제거하려고합니다.

Answer 1

이 무작위 이미지 API는 고통스럽게 느리지 만 데모는 좋습니다. 다음과 같이 접근 할 수 있습니다.

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>