IE에서 src를 변경 한 후 새 이미지 크기를 얻는 방법

나는 스피너 gif가있는 이미지 요소가 있습니다. 나중에 jQuery로 이미지의 src를 동적으로 변경하고 새 이미지의 실제 폭과 높이를 가져 오려고합니다.IE에서 src를 변경 한 후 새 이미지 크기를 얻는 방법

이

function loadImage() { 
$('#uploaded-image').load(function() { 
    var img = document.getElementById('uploaded-image'); 

      // These statements return the correct values in FF and Chrome but not IE 
    imgWidth = img.clientWidth; 
    imgHeight = img.clientHeight; 
}); 
$('#uploaded-image').removeAttr('width').removeAttr('height').attr('src', imgUrl); 
}

이는 크롬과 파이어 폭스에서 완벽하게 작동하지만 IE는 항상 원래의 회 전자 GIF 대신 새로운 이미지의 크기를 반환 : 여기 내 코드입니다.

IE에서 새 이미지의 너비와 높이를 어떻게 얻을 수 있습니까?

참고 : 나는이 같은 결과는 jQuery를 .width()와 .height의() 순수 자바 스크립트 방식 이외에 방법을 시도했습니다

모든 브라우저에서 .load 이벤트가 예상대로 발생합니다.

출처

2011-09-22 bestattendance

정말로 이상한 것은 IE의 개발자 도구에서 DOM 속성을 검사 할 때, 심지어는 원래 스피너 크기보다는 새로운 이미지의 크기를 보여주는 것입니다. – bestattendance

IE 개발자 도구 (F12)에서 DOM을 약간 새로 고침하여 업데이트해야합니다. – Mohsen

크기를 얻으려면 숨겨진 div를 만들고 거기에 이미지를 배치 할 수 있습니다. 숨겨진 div가 display:none으로 완료되지 않았는지 확인하십시오. 그러면 치수가 없기 때문입니다. visibility:hidden을 사용하여 치수를 잡고 제거하십시오. IE에서

$('#uploaded-image').css({ height: "auto", width: "auto" });

출처

2011-09-22 15:56:42 maxedison

는 CSS의 높이를 제거 할뿐만 아니라 폭 있는지 확인합니다. 당신의 IE에서

에 체크를 아웃 : http://jsbin.com/abopih/5

var imgUrl = "http://www.google.com/intl/en_com/images/srpr/logo3w.png"; 
var img = document.getElementById('uploaded-image'); 
$('#uploaded-image').click(function() { 
    imgWidth = img.clientWidth; 
    imgHeight = img.clientHeight; 
    $('#uploaded-image').removeAttr('width').removeAttr('height').attr('src', imgUrl); 
     console.info('clientWidth: ', img.clientWidth); 
     console.info('clientHeight: ', img.clientHeight); 
     console.info('offsetWidth: ', img.offsetWidth); 
     console.info('offsetWidth: ', img.offsetWidth); 
});

출처

2011-09-22 15:58:47 gilly3

사용 offsetHeight 및 offsetWidth을 :

출처

2011-09-22 15:59:17 Mohsen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<input type="file" id="file" /> 
<script type="text/javascript" charset="utf-8"> 
$("#file").change(function(e) { 
    var file, img; 
    file = document.getElementById("file"); 
    if (file!=null) { 
     img = new Image(); 
     img.src = file.value; 
     img.onload = function() { 
      alert(img.width + " " + img.height); 
     }; 
     img.onerror = function() { 
      alert("not a valid file: " + file.type); 
     }; 
    } 

}); 
</script>

출처

2013-09-09 07:30:15

이 캐시 문제가 될 것으로 보인다.

는 이미지 소스 URL이 추가 :

imgUrl += new Date().getTime();

출처

2013-10-29 22:25:23 Sergio

IE에서 src를 변경 한 후 새 이미지 크기를 얻는 방법

답변

관련 문제