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

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

你想把实际的function传递给事件：

 img.onload = loader; 

并在函数中使用this而不是img 。

您还需要在更改图像的src属性之前分配事件。

另请注意，图像上的加载事件存在许多问题。 从load（）上的jQuery手册：

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

开发人员尝试使用.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（）”。

然后在脚本中获得大小调整。

 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。