JS_javascript 기술을 사용하여 이미지 높이와 너비를 얻는 방법

일반적으로 이미지의 높이와 너비를 구하는 방법은 다음과 같습니다.

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

var img = 새 이미지();
img.src = imgsrc;
var imgWH = CalcImgTiple(img.width, img.height);

단, 크롬에서 테스트해보면 얻을 수 없습니다. img.width, img.height는 모두 0

원인: 사진이 로컬 사진이 아닌 네트워크 사진인 경우
이미지가 성공적으로 로드되면 호출되는 onload 이벤트 핸들러입니다.

웹 개발을 하다가 로딩할 이미지의 크기를 얻기 위해서는 자바스크립트를 사용해야 한다는 요구사항이 있어서 자연스럽게 img의 onload 방식이 생각났는데, 파이어폭스에서 개발을 마치고 IE로 갔습니다. 디버그하고 img의 onload 이벤트가 많은 경우에 호출되지 않는다는 것을 발견했습니다.

원본 코드는 다음과 같습니다.

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

var img = 새 이미지;
img.src = "test.gif";
img.onload = 함수(){
경고(img.width);
};

이 코드는 괜찮아 보이지만 IE에서 onload를 호출하지 않는 이유는 무엇입니까? IE는 이미지를 캐시하기 때문에 두 번째로 로드되는 이미지는 서버에서 업로드되지 않고 버퍼에서 로드됩니다. 버퍼에서 로드된 이미지에 대해 onload 이벤트가 트리거되지 않습니까? 그래서 다음 코드를 테스트해 보았는데 잘 되더라고요~

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

var img = 새 이미지;
img.onload = 함수(){
경고( img.width );
img.src = "test.gif";

onload를 앞에 쓰고, 먼저 브라우저에 이 이미지를 처리하는 방법을 알려주고, 그런 다음 이 이미지의 소스를 지정하면 이는 정상입니다. 따라서 IE가 onload 이벤트를 트리거하지 않는 것이 아니라 버퍼가 너무 빨리 로드되어 img.onload가 실행되기 전에 이미 onload 이벤트가 트리거되었기 때문입니다. Ajax가 생각나는군요. xmlhttp를 작성할 때 항상 onstatechange의 콜백 함수를 먼저 지정한 다음 데이터를 보내는 원리는 같습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.