Как узнать ширину изображения, которое не было стилизовано в JavaScript (в IE)?

Question

Представьте, что у вас есть следующее

    img = document.createElement("img");
    img.src = "MahImage.jpg";
    x.appendChild(img);

Что я могу сделать, чтобы узнать ширину и высоту изображения без использования jQuery?

В настоящее время я использую .width, который отлично работает для любого интеллектуального браузера, но я должен найти способ сделать IE счастливым

Answer 1

Вам нужно дождаться загрузки изображения.Вот код (проверено в Chrome):

img = document.createElement("img");
img.src = "http://google.ru/logos/2011/Albert_Szent_Gyorgyi-2011-hp.jpg";
img.onload = function(){
    console.log(img.width, img.height);
}
document.getElementsByTagName('body')[0].appendChild(img);

Answer 2

Вы можете получить доступ к свойствам width и height изображения, но они будут возвращать полезное значение только после загрузки изображения; таким образом, вы захотите получить к ним доступ только внутри события onload изображения (или дать ему разумное время для загрузки).

img = document.createElement("img");
img.onload = function () {
    this.height;
    this.width;
};
img.src = "MahImage.jpg";
x.appendChild(img);

Вы можете увидеть это здесь: http://jsfiddle.net/aS7a7/

Answer 3

Это сложно, потому что вы не можете найти высоту / ширину изображения, пока не закончите загрузку.Это означает, что вам понадобится обратный вызов, прикрепленный к загрузке изображения:

var img = document.createElement("img");
img.src = "MahImage.jpg";
img.onload = imageReady;
x.appendChild(img);

var imageReady = function() {
  alert(img.height); 
  alert(img.width);
}

Answer 4

После загрузки изображения вы можете получить доступ к свойствам width и height.

Например:

alert(img.height + img.width);

Также вы можете получить размеры изображения, используя свойства clientHeight и clienWidth

Чтобы узнать, загружено ли изображение, используйте onload hanler.

Например

img = document.createElement("img");
img.src = "MahImage.jpg";
img.onload = imageproperties;
x.appendChild(img);

function imageproperties() {
    alert(img.height + img.width);
}