Синхронизация загрузки контента

Question

Синхронизация загрузки контента

1

У меня есть четыре html-элемента, в которых на разных скоростях с сервера поступает различное количество контента (текст и изображения). Как я могу показать их содержимое только после того, как весь контент попадет во все элементы?

Я хочу сначала показать заполнители и удалить их только тогда, когда у меня есть все содержимое, готовое для показа для пользователя.

Vladimir Humeniuk 09 сен. 2017, в 21:28

Источник

0

предварительно загрузить ваш контент? если единственная проблема заключается в задержках изображений (т. е. ваш текст мгновенно отображается сервером), тогда предварительно загружайте только изображения - есть много проверенных решений для использования вызовов image.onload для агрегирования загрузок до тех пор, пока они не будут у вас все, а затем вызовет dom render из них всех
A Macdonald 09 сен. 2017, в 18:55
0

Вы можете использовать Promise.all()
Redu 09 сен. 2017, в 19:44

Теги:

javascript

arrays

es6-promise

nodelist

1 ответ

Ещё вопросы

предварительно загрузить ваш контент? если единственная проблема заключается в задержках изображений (т. е. ваш текст мгновенно отображается сервером), тогда предварительно загружайте только изображения - есть много проверенных решений для использования вызовов image.onload для агрегирования загрузок до тех пор, пока они не будут у вас все, а затем вызовет dom render из них всех

Redu · Accepted Answer · 2017-09-09T20-16-00.000Z

Хотя я нахожу этот случайный образ 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>

чувак, это очень медленно, вам нужен счетчик;)