javascript - 确定图像未插入 dom 时的宽度和高度

Question

我正在使用 ajax 调用从服务器接收长字符串中的图像

图片的 url 肯定在 result[1] 中。我使用了 width/naturalWidth 和 height/naturalHeight ，有时它们返回 0 ，在其他情况下它们返回正确的像素大小

var imgElement = jQuery("<img>").attr("src", result[1]);
var width = imgElement[0].naturalWidth;
var height = imgElement[0].naturalHeight;
if (width >= that.minImgPixels && height >= that.minImgPixels) {
    image = result[1];
}

如何在不将其插入 dom 的情况下检查图像宽度和高度的正确方法？

Answer 1

出现问题是因为设置 an 的 srcjQuery("<img>")需要时间，并且在执行此操作时，由于尚未加载图像，javascript 会继续运行到产生 0 的下一行。

解决方案是设置这样的加载事件：

var imgElement = jQuery("<img>").load(function(){
    var width = imgElement[0].naturalWidth;
    var height = imgElement[0].naturalHeight;
    if (width >= that.minImgPixels && height >= that.minImgPixels) {
        image = result[1];
    }
}).attr("src", result[1]);

Answer 2

尝试这个：

function GetAnImage(src) {

    var newImg = document.createElement('img');
    newImg.src = src;

    return newImg;
}

var newImg = GetAnImage("abc.jpg");
newImg.onload = function () {                           
    var height = this.height;
    var width = this.width;  
    //do with the image as you want         
}

或查看此链接：Getting auto size of IMG before adding it to DOM (Using JQuery)