jquery_jquery를 사용하여 웹 페이지의 이미지 높이를 얻는 두 가지 방법

실제로 jquery를 사용하여 웹 페이지의 이미지 높이를 얻는 것은 매우 간단합니다.

코드 복사 코드는 다음과 같습니다.

$("img").whith(); (순수한 숫자 반환)
$("img").css("width "); (문자열 반환 : 숫자 "px")

그런데 가끔 0을 반환하는 상황에 직면하게 됩니다. 위 메소드의 반환 값은 실제로 0 또는 0px인데, 이는 매우 놀랍습니다.


방법 1
오래 전에 저는 이 솔루션을 사용했는데, 이는 제 스승님이 저에게 말씀하신 솔루션이기도 합니다. 가져오려면 이미지 태그를 가져오거나 CSS에 이미지 설명을 작성하면 됩니다. 따라서 이미지 높이를 얻으려면 항상 이미지 높이를 먼저 측정한 다음 작성해야 합니다. 웹페이지에 접속하면 끝인데, 많이 어색하지 않나요? 두 번째 방법을 살펴보겠습니다.


방법 2
최근에 Learning jQuery의 영문 원본을 읽고 있었는데, 번역과 읽기를 동시에 했기 때문에 한 페이지 한 페이지 꼼꼼히 읽어봤습니다. 그래서 드디어 잘 읽어보고, 자주 사용되는 jquery 이벤트 로딩 방법 두 가지

코드 복사 코드는 다음과 같습니다. :

$(function(){});
window.onload=function(){}

첫 번째는 DOM 구조 렌더링 후에 호출됩니다. 이때 웹페이지에 사진이나 기타 리소스 등 일부 리소스가 로드되지 않았지만 DOM 구조는 성공적으로 렌더링되었습니다.
웹페이지의 DOM 구조가 호출된 후 두 번째입니다. 렌더링되었으며 리소스가 성공적으로 로드되었습니다.

차이점을 느끼시나요? 하나는 리소스가 로드되지 않았을 때 호출되고, 다른 하나는 리소스 로드가 완료되고 페이지가 렌더링된 후에 호출되므로 $(function() {} ) $('img').width() 호출 시 이미지가 로드되지 않았으므로 이때 태그의 높이가 0이므로 반환 값은 0입니다. 하지만 window.onload=function(){}으로 호출하면 이미지가 이미 로드되어 있으므로 이때 이미지의 높이를 가져올 수 있습니다.

따라서 DOM 렌더링이 완료되고 리소스가 로드되지 않은 경우 $(function(){})이 실행된다는 점을 기억하세요. 리소스 정보를 얻으려면 현재로서는 방법이 없습니다.