Javascript 获取图像的本机分辨率失败

我目前正在尝试实现一个用于比较两个图像的放大镜。显然，我需要知道图像的本机分辨率，但创建新的

图像

对象、设置

src

然后查询

宽度

和

高度

属性的常用方法失败。它总是返回0

我还尝试了

nativeWidth

和

nativeHeight

我准备了一份JSFIDLE：

这里是我在JSFIDLE中使用的源代码，相关部分在之后立即开始

this.setPosition=函数（x，y）{

HTML:

。。。
...

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

var放大镜=功能（elem）{
var self=这个；
var imageUrl=”http://placehold.it/400x600";
//配置父成员字段
//----------------------------------------------
//设置布局
elem.magnifierContainer=$（“”）.css({
“位置”：“相对”，
“游标”：“无”
});
元素放大镜=$（“”）.css（{
“位置”：“绝对”，
“高度”：“11em”，
“宽度”：“11em”，
“边界半径”：“50%”，
“盒影”：“3px 3px 5px#111”，
“背景”：“url（“+imageUrl+”）不重复”，
“显示”：“无”
});
elem.smallImage=$（“0&&cursorX<$（self.elemparent.smallImage.width（））
&&（cursorY>0&&cursorY<$（self.elemparent.smallImage.height（））{
self.setVisible（true）；
if（self.syncedMagnizer！=null）{
self.syncedMagnizer.setVisible（true）；
}
}否则{
self.setVisible（false）；
if（self.syncedMagnizer！=null）{
self.syncedMagnizer.setVisible（false）；
}
}
//设定位置
自身设置位置（游标，游标）；
if（self.syncedMagnizer！=null）{
self.syncedMagnizer.setPosition（游标、游标）；
}
});
};
var magnifier1=新的放大镜（document.getElementById（“放大镜”）；
var magnifier2=新的放大镜（document.getElementById（“magnifiedImage2”）；
放大镜1.与同步（放大镜2）；

编辑：我用另一个图像（不是从placehold.it）尝试了它，它成功了！？我真想知道为什么它不能用placehold.it图像

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