페이지로드 후 이미지 크기 가져 오기

Question

로고 크기를 가져 와서 그에 따라 위치를 조정해야하는 프로젝트가 있습니다. 내가 이해 한대로 페이지의 모든 요소는 $(document).ready 또는 onload 이벤트 직후에 사용할 준비가되어야합니다. 또한 모든 것을 얻을 수 있는지 확인하기 위해 닫는 본문 태그 앞에 스크립트를 넣으려고했습니다. jQuery $(element).width 및 $(element).height을 사용하여 로고 이미지를 측정합니다.

그러나이 값은 매번 얻지 못합니다. 콘솔에이 두 값을 기록합니다. 때로는 0이라고 표시합니다. 이미지 태그가로드되었지만 실제 이미지가 아직로드 중입니다. 온라인 검색 때문에 혼란 스럽습니다. DOM 준비를 사용하거나 끝에 스크립트 태그를 넣으면 모든 요소가 준비되어야한다고 모든 사람들이 말합니다.

Answer 1

페이지의 모든 요소는 $ (document) .ready 또는 onload 이벤트 바로 다음에 사용할 준비가되어 있어야합니다. 또한 모든 것을 얻을 수 있는지 확인하기 위해 닫는 본문 태그 앞에 스크립트를 넣으려고했습니다.

아니요, $(document).ready 이벤트가 발생했습니다. 본문에서 마지막 요소로 스크립트를 임베드하는 것은 DOM 구조가 이미 구축되었음을 보증합니다. 즉, 이 아닌은 어떤 요소에 의해 참조 된 외부 리소스가 이미로드를 마쳤다는 것을 의미합니다. 이는 유일한 보장 이벤트 인 load 이벤트입니다.

jQuery docs는 $(document).ready과 "old school"로드 이벤트 처리 (body 또는 window.onload의 onload 속성을 의미 함)를 결합하는 것에 대해 명시 적으로 경고하므로 - .on('load', handler)을 대신 사용해야합니다. 그러나 문서에도 언급 된 이미지와 관련한 동굴 탐험을 알고 있어야합니다.

Answer 2

이이

$('#img').load(function() { 
// Handler for .load() called. 
});