Question

How can I get image size before I put it into the 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

});

Answer 1

Use imgLoad[0].width and imgLoad[0].height instead, or use this instead of 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);

});

Working demo: http://jsfiddle.net/7twNk/

This works because the browser populates the height/width properties of the element when it downloads the image. jQuery, on the other hand, fetches the actual visible dimensions of the element — this will always be 0 when an element isn’t displayed.

Note that you do not need to keep wrapping imgLoad with $() because it is already a jQuery object.