зачем этот документ?готовые пожары не вовремя [дубликат]

Возможный дубликат:
окно.onload vs document.готовый jquery

У меня есть такая проблема: у меня есть изображение на странице, которое не является таким большим. и у меня есть функция js, которая устанавливает высоту левой боковой панели динамически в зависимости от высоты содержимого и размера окна. поэтому, если я изменяю размер страницы, боковая панель также изменяется динамически. но теперь высота боковой панели устанавливается очень рано, в результате чего она устанавливается неправильно. то настройка произойдет в документе"`.готовая " функция, которая должна срабатывать после того, как все DOM готово, включая изображения, верно?

Вот моя страница, пожалуйста, откройте ее в chrome, вы увидите проблему более четко. http://www.stahlbaron.de/standort/

А вот моя функция js, которая динамически устанавливает боковую панель. 

<script type="text/javascript">
   var calculateSize = function () {
   var winh = document.body.clientHeight;
   var footer = document.getElementById('footer').offsetHeight;
   document.getElementById('sidebar').style.height = winh - 5/2*footer + 'px';
   document.getElementById('sidebar').style.marginBottom = footer + 'px';
}
$(document).ready(function(){
   calculateSize();
   $(window).resize(calculateSize);
});

Спасибо за любой вид и Ваше время!

1 2
javascript html document-ready

1 ответ:

Вы должны ловить на $(window).on('load', ...), а не на $(document).ready.

Первый ожидает загрузки изображений (и всего остального контента), в то время как второй ожидает только создания дерева DOM, представляющего элементы, которые находятся в исходном коде HTML.

Поскольку вы хотите, чтобы одна и та же функция вызывалась при изменении размера, вы можете объединить регистрации событий: 

$(window).on('load resize', calculateSize);
3