Как назначить css-свойство ДО загрузки страницы?

Question

[Max Rudik]

Добрый вечер!
Для обеспечения адаптивности слайдера передаю слайдам значение высоты родительского блока.
Все работает, но не с первого раза(
Сначала загружается страница с куском картинки большого исходного размера и только после перезагрузки страницы картинка получает нужную высоту.
test-kant.rudik.info - вот тестовая страница
Как это исправить?

$(document).ready(function(){
  var height = $(".index-content").height();   
  // console.log(height);
  $('.slide').height(height);
});

$(window).on('resize', function(){
  var height = $(".index-content").height();   
  // console.log(height);
  $('.slide').height(height);
});

Answer 1

[Сергей Горячев]

Инлайном пропиши.
<div class="slide" style=""></div>

Comments

[Алекс Глебов]

вы серьезно? как потом с этим беку работать?

Answer 2

[Max Rudik]

Нашел решение своей проблемы на stackoverflow, здесь есть один нюанс который может быть интересен. Дело в том, что получая слайды в переменную, мы создаем массив, которому нельзя напрямую присвоить css- свойство. Чтобы задать слайдам высоту надо пройтись циклом по каждому из них.

window.onload = function(){
            var view = document.getElementById('index-content'),
                viewHeight = view.clientHeight + "px",
                slides = document.getElementsByClassName('slide');
                console.log(viewHeight);
                console.log(slides);
                // slides.style.height = viewHeight; - так не получится!
                for(var i = 0; i < slides.length; i++){
                  slides[i].style.height = viewHeight;
                }
              }