Как загрузить гифку

[dmitry111]

Проблема: во время загрузки gif происходит схлопывание окна на полсекунды.
Решить проблему отображением лоадера и события onload нельзя, gif долго загружается.

Известен размер gif 1280x800 (соотношение 8:5), но контейнер растягивается в зависимости от размеров экрана, поэтому указать эти размеры нельзя

Может можно прописать высоту контейнера как-нибудь, чтоб предотвратить схлопывание?

[Aetae]

Обычная техника для aspect-ratio:

<style>
.wrapper {
  resize: horizontal;
  border: 1px dashed;
  width: 100px;
  overflow: hidden;
}

.wrapper::before {
  content: "";
  display: block;
  float: left;
  padding-bottom: 62.5%; /* 1280x800: 800 / 1280 * 100 */
}

#img {
  display: block;
  width: 100%;
}
</style>

<button onclick="img.src='//via.placeholder.com/1280x800'">
  load img
</button>

<div class="wrapper">
  <img id="img"/>
</div>