使用innerHTML使用JavaScript获取图像维度

我正在开发一个接收图像URL的AJAX函数。但是，我不会使用节点附加来插入它。我使用的是innerHTML，这使得获取文件维度非常困难

目前，我使用的函数返回的结果有些复杂。有时它获取实际尺寸，有时返回“0”作为图像尺寸

这是我的职责：

var url = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";
var width = getDimensions(url)[0];
var height = getDimensions(url)[1];
var insert = '<img src="'+url+'" width="'+width+'" height="'+height+'" />';

    function getDimensions(path) {
            var img = new Image();
            img.src = path;
            return [img.width, img.height]; 
    }

var url=”http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";
var-width=getDimensions（url）[0]；
变量高度=getDimensions（url）[1]；
var insert=''；
函数getDimensions（路径）{
var img=新图像（）；
img.src=路径；
返回[img.宽度，img.高度]；
}

不知道为什么它的行为不一致。有人有什么建议吗

我在想，这可能与AJAX在加载维度之前插入图像有关，尽管还不是很确定

这是一把小提琴，它似乎像预期的那样工作，但正如我所说的，它是不一致的

编辑 这是第二个小提琴与一个更大的图像。我注意到它比较小的图像文件更加不一致

---

您必须等待图像完成加载，然后才能正确可靠地获取尺寸。目前的情况是，它在图像可能完全加载之前返回维度。如果您已经缓存了它，您可能会得到正确的维度，但在未缓存的大型图像上，您将无法得到可靠的结果

看看这个演示，看看你是如何做到这一点的

Javascript:

var url = "http://www.hdwallpapers.in/download/transformers_4_age_of_extinction-2560x1440.jpg";

var div = document.querySelector('div');
alert('loading image now');
var button = document.querySelector('.test');
getDimensions(url);



button.addEventListener('click', function () {
    div.innerHTML = insert;
});


function getDimensions(path) {
    var img = new Image();
    img.src = path;
    img.onload = function () {
        alert('loaded');
        var width = img.width;
        var height = img.height;
        insert = '<img src="' + url + '" width="' + width + '" height="' + height + '" />';
        button.disabled = false
    };
}

var url=”http://www.hdwallpapers.in/download/transformers_4_age_of_extinction-2560x1440.jpg";
var div=document.querySelector（'div'）；
警报（“正在加载图像”）；
var按钮=document.querySelector（'.test'）；
获取维度（url）；
按钮。addEventListener（'click'，函数（）{
div.innerHTML=插入；
});
函数getDimensions（路径）{
var img=新图像（）；
img.src=路径；
img.onload=函数（）{
警报（“已加载”）；
变量宽度=img.width；
var高度=img高度；
插入=“”；
button.disabled=false
};
}

图像加载是异步的，我想知道即使图像已缓存，您如何获得正确的

.width

和

.height

。感谢您的帮助！