Как управлять загрузкой блоков на странице?

Question

[DrunkMaster]

Рекомендация от гугл:
Если страница разделена на две части – боковую навигационную панель с одной стороны и основную статью с другой, рекомендуется в первую очередь загружать статью, а потом – боковую панель.

Возьмём для примера этот код: https://jsfiddle.net/s4Lxepyr/

<div class="main">
  <div class="left">
    левое меню
  </div>
  <div class="right">
    основной контент
  </div>
</div>

.main{
  width: 100%;
  border: solid 1px red;
  padding: 4px;
}
.left{
  width: 19%;
  display: inline;
  border: solid 1px green;
  margin: 4px;
}
.right{
  width: 70%;
  display: inline;
  border: solid 1px blue;
  margin: 4px;
}

Как загрузить блок right раньше блока left и разве они не появятся на странице одновременно, когда прогрузится весь блок main с ними обоими внутри?

Answer 1

[zoozag]

Расположить в коде right раньше left.
Дальше уже на ваш вкус как вы их расположите: Пример

PS: Аккуратней с использованием display: inline; Многие из свойств, которые вы задали своим блокам не поддерживаются строчными элементами

Comments

[DrunkMaster]

Спасибо, можно уточнить когда на экране в этих случаях появляется блок main? Когда внутри всё прогружено? Или сначала на экране появляется main (пустой, белый), а потом по порядку загрузки всё что внутри него?

[zoozag]

Можете посмотреть как рендеристя страница во вкладке Network в Developer Tools