왜 시간에이 document.ready 화재하지

Question

가능한 중복 :
window.onload vs document.ready jquery

내가이 문제가 있습니다 : 내가 그렇게 큰 하나가 아닌 페이지에 이미지를 가지고있다. 그리고 난 콘텐츠의 높이와 창의 크기에 따라 왼쪽 사이드 바 높이를 동적으로 설정하는 js 함수가 있습니다. 그래서 페이지 크기를 조정하면 사이드 바의 크기도 동적으로 조정됩니다. 하지만 이제 사이드 바 높이가 매우 일찍 설정되어 결국 잘못 설정됩니다. 설정은``document.ready`` 함수에서 발생합니다.이 함수는 이미지를 포함하여 모든 DOM이 준비된 후에 실행되어야합니다.

여기 내 페이지입니다. 크롬에서 열어주세요. 문제가 더 분명하게 보입니다. 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); 
}); 

감사합니다!

Answer 1

$(document).ready 대신 $(window).on('load', ...)에 트랩해야합니다.

전자는로드 할 이미지를 기다리는 반면 (전자는 다른 모든 컨텐트) HTML 소스에있는 요소를 나타내는 DOM 트리가 생성 되기만 기다립니다. 대답은 동일 할 수 있지만, 문제는 다르다 -

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