Как получить новый размер изображения после изменения src в IE - PullRequest
Новая
       10

Как получить новый размер изображения после изменения src в IE

0 голосов
/ 22 сентября 2011

У меня есть элемент изображения с вращающимся GIF. Позже я динамически изменяю src этого изображения с помощью jQuery, и я хочу получить фактическую ширину и высоту нового изображения. Вот мой код: 

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);
}

Это прекрасно работает в Chrome и Firefox, но IE всегда возвращает размер оригинального gif счетчика вместо нового изображения.

Как узнать ширину и высоту нового изображения в IE?

Примечания:

Я пробовал методы jQuery .width () и .height () в дополнение к чистому подходу Javascript, с теми же результатами.

Событие .load запускается, как и ожидалось, во всех браузерах.

Ответы [ 5 ]

2 голосов
/ 22 сентября 2011

Используйте offsetHeight и offsetWidth в IE.

Проверьте это в своем 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);
});
0 голосов
/ 30 октября 2013

Кажется, проблема с кешем.

Добавьте это к URL вашего источника изображения: 

imgUrl += new Date().getTime();
0 голосов
/ 09 сентября 2013 
<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>
0 голосов
/ 22 сентября 2011

Убедитесь, что вы удалили css высоту и ширину, а также: 

$('#uploaded-image').css({ height: "auto", width: "auto" });
0 голосов
/ 22 сентября 2011

Вы можете создать скрытый div и поместить туда изображение, чтобы получить размер.Просто убедитесь, что скрытый div не сделан с display:none, потому что тогда он не будет иметь никаких измерений.Используйте visibility:hidden, возьмите размеры и затем удалите их.

...