페이지 실행시 스크립트 실행과 웹킷의 페이지로드 대 페이지 이동

Question

일부 요소 오프셋을 사용하는 스크립트가 있습니다. 이 스크립트를 다음과 같이 실행하려고했습니다 :

window.addEventListener('load', function() { 
    ... 
} 

이 방법을 사용하면 모든 DOM 요소가 정의되지만 오프셋 값이 잘못되었습니다. 몇 가지 CSS 값을 해제하여 제공된 오프셋을 가져올 수 있습니다. 내가 적용한 신속한 끔찍한 수정 :

window.addEventListener('load', function() { 
    function my_func(){ 
     ... 
    } 
    window.setTimeout(my_func, 1000); 
}); 

이것은 올바른 오프셋을 렌더링하지만 덕트 테이프처럼 느껴집니다.

내 마지막 시도는 렌더링하기 위해 웹킷을 강제로했다, 또한 잘못된 오프셋했다이 :

window.addEventListener('load', function() { 
    function my_func(){ 
     ... 
    } 
    document.getElementById('wrap').style.display = 'none'; 
    document.getElementById('wrap').style.display = 'block'; 
    my_func(); 
}); 

어떤 sugestions를? 또는 이것이 일어나는 이유에 대한 설명. 내가 테스트 한 브라우저는 Chrome입니다.

편집 :

오프셋은 DOM 구조입니다 :

<div id="wrap"> 
    <div> 
     <p>...</p> 
     <p>...</p> 
     <p>...</p> 
    </div> 
    <div> 
     <p>...</p> 
    </div> 
    ... 
</div> 

나는 "#wrap의 DIV"의 노드 목록을 통해 전지 (위해)에 의해 오프셋을 액세스 할 수 있습니다. 줄 높이 및 글꼴 크기를 해제하면 레이아웃이 완전히 렌더링되기 전에 계산 된 오프셋이 표시됩니다.

offsetHeight를 사용하기 전에 각 p 및 div에 대해 선 높이, 글꼴 크기 및 표시를 조정해도 아무런 영향이 없습니다.

Answer 1

당신은 당신의 CSS 및 이미지 로딩을 완료 할 때 당신이 알고하지 않기 때문에 렌더링 페이지 load 대신 ready 또는 을 사용해야합니다.

오프셋이 load이 아니라면 계속 진행 중입니다.