Question

function loader(img) {
        var imgH = img.height;
        var imgW = img.width;
        console.log(imgH, imgW);    
    };

img = new Image();
img.src ='../images/pic1.jpeg';
img.onLoad = loader(img);

所以，它被执行了，我将获得图像的大小，但我在控制台中得到“0 0”。图像尺寸为500X700。这段代码出了什么问题？

Answer 1

这没有任何意义：

img.onLoad = loader(img);

您想将实际功能传递给事件：

img.onload = loader;

并在函数中使用this代替img。

此外，您需要在更改图片的src属性之前分配事件。

另请注意，图像上的加载事件存在许多问题。来自jQuery manual on load():


与图像一起使用时加载事件的注意事项

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

Answer 2

试试这个：

function loader(){
    var imgH = this.height;
    var imgW = this.width;
    console.log(imgH, imgW); 
}
var img = new Image();
img.onload = loader;
img.src ='../images/pic1.jpeg';

Answer 3

我用这种方式：

img.onload = function(){//here wrote everything from loader};

这是我找到的唯一可行的解决方案。

Answer 4

我发现最好的方法是先让电脑进行缩放。

并在正文中声明onload =“some_function（）”。

<body onload="some_function()">

然后在脚本中获取大小。

some_function(){

var image1 = document.getElementsByClassName('main')[0];
var computedStyle_image1 = window.getComputedStyle(image1);
var image_width = computedStyle_image1.getPropertyValue('width');

}

我注意到使用谷歌浏览器你需要确保你在主体div中调用onload =“function”，否则图像值没有设置，它的宽度和高度拉入0px。

Javascript在图像加载后计算图像大小

4 个答案: