获取图像的原始分辨率失败

Question

我目前正在尝试使用放大镜来比较两张图片。显然我需要知道图像的原始分辨率，但创建新Image对象的常见方法，设置src然后查询width和height属性失败。它总是返回0.

我还尝试了nativeWidth和nativeHeight。

我准备了一个JsFiddle：http://jsfiddle.net/b6kz8xjf/6/

这里是我在JsFiddle中使用的源代码，相关部分在

之后开始

this.setPosition = function(x,y) {

HTML：

...
<div style="width:100%; height:100%;">
    <div id="magnifiedImage"  style="float:left; margin:20px; width:200px; height: 300px;"> </div>
    <div id="magnifiedImage2" style="float:left; margin:20px; width:200px; height: 300px;"> </div>
</div> 
...

使用JQuery的JavaScript：

var Magnifier = function(elem) {

var self     = this;
var imageUrl = "http://placehold.it/400x600";

// Configure Parent Member Fields
//----------------------------------------------

// Setup the layout
elem.magnifierContainer = $("<div>").css({
    "position" : "relative",
    "cursor"   : "none"
});

elem.magnifier = $("<div>").css({        
    "position"            : "absolute",
    "height"              : "11em",
    "width"               : "11em",
    "border-radius"       : "50%",
    "box-shadow"          : "3px 3px 5px #111", 
    "background"          : 'url(' + imageUrl + ') no-repeat',  
    "display"             : "none"
});

elem.smallImage = $("<img>").attr({
    "src" : imageUrl
}).css({
    "width"  : "100%",
    "height" : "100%",          
    "max-width"  : "400px",
    "max-height" : "600px",        
});

$(elem.magnifierContainer).append(elem.smallImage, elem.magnifier);
$(elem).append(elem.magnifierContainer);   

// Magnifier
// ----------------------------------

this.elemparent      = elem;
this.syncedMagnifier = null;

// Synchronizes this Magnifier with another (propagating all actions to aMagnifier)
this.syncWith = function(aMagnifier) {
    if (!(aMagnifier instanceof Magnifier)) {
        return;  
    }

    this.syncedMagnifier = aMagnifier;
    aMagnifier.syncedMagnifier = this;
};

// Sets the position of the magnifier relative to the parent
this.setPosition = function(x, y) {

    // Get native image resolution
    var nativeImage = new Image();
    nativeImage.src = $(elem.smallImage).attr("src");
    var nativeWidth  = nativeImage.width;
    var nativeHeight = nativeImage.height;

    console.log(nativeImage.width);
    //alert(nativeImage.src + ": " + nativeWidth + " / " + nativeHeight);

    // Calculate magnifier position and background-image offset
    var imageWidth   = $(elem.smallImage).width();
    var imageWidth_2 = imageWidth / 2;        
    var imageHeight   = $(elem.smallImage).height();
    var imageHeight_2 = imageHeight / 2;     

    var magnifierImagePosX =  Math.round(imageWidth_2 - x / imageWidth * nativeWidth * 2);
    var magnifierImagePosY =  Math.round(imageHeight_2 - y / imageHeight * nativeHeight * 2);

    $(elem.magnifier).css({ 
        "left"               : x - elem.magnifier.width()/2, 
        "top"                : y - elem.magnifier.height()/2,
        "backgroundPosition" : magnifierImagePosX + "px " + magnifierImagePosY + "px"
    });
};

// Sets the visibility of the magnifier
this.setVisible = function(bVisible) {
    if (bVisible) {
        $(this.elemparent.magnifier).fadeIn("fast");
    } else {
        $(this.elemparent.magnifier).fadeOut("fast");
    }
}


// Parent Functionality
//-----------------------------------------------

// Add Event listening
elem.addEventListener("mousemove", function(event) {
        var cursorX = event.pageX - $(self.elemparent).offset().left;
        var cursorY = event.pageY - $(self.elemparent).offset().top;

        // Check visibility
        if ((cursorX > 0 && cursorX < $(self.elemparent.smallImage).width()) 
                && (cursorY > 0 && cursorY < $(self.elemparent.smallImage).height())) {
            self.setVisible(true);
            if (self.syncedMagnifier != null) {
                self.syncedMagnifier.setVisible(true);
            }
        } else {
           self.setVisible(false);
           if (self.syncedMagnifier != null) {
                self.syncedMagnifier.setVisible(false);
           }
        }

        // Set position
        self.setPosition(cursorX, cursorY);
        if (self.syncedMagnifier != null) {
            self.syncedMagnifier.setPosition(cursorX, cursorY);
        }
});
};

var magnifier1 = new   Magnifier(document.getElementById("magnifiedImage"));
var magnifier2 = new Magnifier(document.getElementById("magnifiedImage2"));
magnifier1.syncWith(magnifier2);

编辑：我尝试了另一张图片（不是来自placehold.it）并且它有效！？我真的很想知道它为什么不能使用placehold.it图像？