감지하는 방법 모든 이미지가로드 및 요소들은 적절한 높이로 렌더링 할 때

Question

내가 확인할 수있는 방법 페이지의 모든 이미지가로드되었는지, 그들이에서 렌더링 된 그 (JQuery와 또는 바닐라 JS 포함) 그들의 최종, 전체 높이, 그리고 그들의 부모 요소가 그 높이로 조정? 사용자가 페이지에 그들이 스크롤 자신의 위치를 ​​업데이트하는 탐색 메뉴에서 자신의 위치를 ​​강조 위치를 결정 뭔가 -

나는 JQuery와를 사용하여 scrollspy 기능을 구현하고있다. 이것이 제대로 작동하려면, 내가 간첩하고 싶은 페이지의 각 섹션의 offset.top을 알아야합니다. offset.top을 너무 일찍 계산하면 모든 이미지가로드되고 전체 높이로 표시되기 전에 offset(). top 계산이 올바르지 않습니다. offset(). top 계산을 너무 많이 실행하지 않도록하고 싶습니다.

상황이 내 요구를 충족하지 않는 시도했다 :

$(document).ready() and $(window).onload() 너무 일찍 모두, 이미지, 따라서 자신의 전체 높이에 렌더링되지 섹션을 만들고, 자신의 전체 높이로 렌더링되지 않았을 수있다.

imagesLoaded 라이브러리. 위의 동일한 문제는 전체 높이로 이미지 렌더링을 고려하지 않습니다.

Answer 1

내 경험에 비추어 볼 때 사소한 것이 아닌 것 같습니다. window.onload이 도움이 될 수 있지만 이미지가 동적으로로드 될 때 신뢰할 수 없습니다. 과거에는 해킹이 가능하도록 해킹을 사용하고있었습니다. 기본적으로 window.setInterval을 사용하고 있었고 이미지가 실제로 naturalWidth (https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement 참조) 속성을보고 확인할 수 있는지 확인했습니다. https://jsfiddle.net/yu8zr20h/

Answer 2

당신은 잘못된 방법으로이 문제를 해결하고 있습니다 : 여기

구현의 예입니다. 사용자 창의 현재 Y 값을 모든 구성 요소의 Y 값 또는 적어도 다른 탐색 값이 포함 된 컨테이너와 비교해야합니다.

상상이 당신의 HTML 코드입니다 :

<div id="firstContainer"> 
    <!-- Some content --> 
</div> 

<div id="secondContainer"> 
    <!-- Some other content --> 
</div> 

지금 당신이 scrollY

를 사용 document.gelElementBtId('element-id').offsetTop

사용자의 현재 높이를 사용하여 전체 HTML 페이지에 높이 상대를 확인하실 수 있습니다

자세한 내용은 JSFiddle입니다.