모든 페이지 리소스가로드되었을 때 DOM 요소의 오프셋/위치 저장

Question

나는 오프셋 위치를 저장하고있는 DOM 요소를 가지고 있습니다. 예를 들어 페이지가 웹 글꼴을 사용하고 HTML에서 명시 적 width 또는 height 속성이없는 이미지를 가지고 있기 때문에 이러한 항목이로드를 완료로

$element.data('offset', $element.offset().top);

그러나, 페이지 길이가 실제로 증가한다.

따라서 모든 리소스가 완전히로드되기 전에이 코드를 실행하면 오프셋이 달라집니다. 예를 들어, 웹 글꼴이로드중인 경우 500, 모든 것이로드 된 경우 1000입니다.

jQuery load 함수를 사용해 보았습니다. 이렇게하면 상황이 개선되고 페이지가 완전히 70 % 정도로드 된 후에 만 ​​오프셋을 저장합니다. 그러나 100 %의 정확성이 필요합니다.

어떻게 해결할 수 있습니까?

Answer 1

Google WebFont Loader, 즉 active() 콜백을 사용하십시오. 로더는 구글이 아닌 다른 글꼴 라이브러리를 지원합니다, 그래서 당신은 당신의 자신의 글꼴을로드 할 수 있습니다

https://developers.google.com/webfonts/docs/webfont_loader

Answer 2

load에 window 개체를 사용하십시오. 모든 리소스가 페이지에로드되었을 때 실행됩니다. 도움이 될 수 있습니다.

$(window).load(function(){ 
    $element.data('offset', $element.offset().top); 
});