Размер изображения до DOM

Как я могу получить размер изображения перед тем, как поместить его в DOM?

var imgLoad = $("<img />");
$(imgLoad).attr("src", ImageGallery.ImagesList[index] + "?" + new Date().getTime());
$(imgLoad).unbind("load");
$(imgLoad).bind("load", function () {

   // Get image sizes
   alert(imgLoad.width()); // RETURN 0

});

Ответы

Ответ 1

Используйте imgLoad[0].width и imgLoad[0].height вместо этого или используйте this вместо imgLoad:

var imgLoad = $("<img />");
imgLoad.attr("src", ImageGallery.ImagesList[index] + "?" + new Date().getTime());
imgLoad.unbind("load");
imgLoad.bind("load", function () {

   // Get image sizes
   alert(this.width);

});

Рабочая демонстрация: http://jsfiddle.net/7twNk/

Это работает, потому что браузер загружает свойства height/width элемента при загрузке изображения. jQuery, с другой стороны, извлекает фактические видимые размеры элемента — это всегда будет 0, когда элемент не отображается.

Обратите внимание, что вам не нужно обертывать imgLoad с помощью $(), потому что это уже объект jQuery.

Ответ 2

При создании нового изображения .width даст вам собственные размеры неокрашенного изображения, тогда как .width() является методом jQuery и не возвращает значение до тех пор, пока изображение не будет вставлено в DOM.

В обычном старом JS;

var i = new Image()
i.src = 'blah.gif'
var h = i.height
var w = i.width

вернет вам истинное значение