Question

我正在开发一个接收图片网址的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]; 
    }

不确定为什么它的表现不一致。有没有人有任何建议？

我认为在加载尺寸之前插入图像可能与AJAX有关，尽管不是很确定。

这是一个小提琴，似乎按预期工作，但就像我说的那样，它是不一致的。

http://jsfiddle.net/aH5re/1/

修改这是第二个提供更大图像的小提琴。我注意到它比一个较小的图像文件更不一致

http://jsfiddle.net/aH5re/2/

Answer 1

您必须等待图像完成加载才能正确可靠地获得尺寸。目前正在发生的是它在图像可能完全加载之前返回尺寸。如果你已经缓存了它，你可能会得到正确的尺寸，但是如果没有获得可靠的结果，那么你将无法获得可靠的结果。

看看这个演示文章，了解如何实现这一目标。

http://jsfiddle.net/robschmuecker/aH5re/5/

使用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
    };
}

使用innerHTML使用JavaScript获取图像尺寸

1 个答案: