无法使用Javascript在Safari中检索图片宽度，但在Chrome中可以正常使用

Question

我有以下代码

RANDOM_NUMBER

为什么Safari中的width属性为0，我该如何解决？

Answer 1

虽然它确实很重要，但请尝试使用.clientWidth代替.width

This answer解释说

  

对于IMG元素，这将获得可见图像的实际尺寸。

<强> HTML

<img id="image" width="0" height="100" src="http://placehold.it/100x100"/>

<强>的JavaScript

var img = document.getElementById('image'); // which is an <img> element

if (img.clientWidth > 0) {
    // I get here in Chrome, width is correct
    console.log('Do something if greater than 0')
} 
else {
    // I get here in Safari, width is 0
    console.log('Do something else if not greater than 0')
}

这是一个快速Codepen link，可以在两个浏览器中显示它

Answer 2

您是否尝试过阅读＆＃34; offsetWidth＆＃34;对象

img = document.getElementById('image');
img.offsetWidth // here you go

Answer 3

Safari很可能无法访问图片的尺寸，因此在您进行探测时无法计算其宽度和高度。

您应该等待加载图像，这会触发一个事件处理程序，您可以从中获取图像尺寸。