如何检索图像'；在html/javascript中使用dom的大小？_Javascript_Html

如何检索图像'；在html/javascript中使用dom的大小？

javascript html

如何检索图像'；在html/javascript中使用dom的大小？,javascript,html,Javascript,Html,我试图用javascript获取图像的大小，使用以下代码： var image = document.createElement("img"); image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 然后我一直在尝试使用或获取图像的宽度，但在使用上述代码创建元素后，它检索到0。。你可以用 image.height image.width 您得到0的原因是，当您执行该语句时，它不会加载。您必须

我试图用javascript获取图像的大小，使用以下代码：

var image = document.createElement("img");
image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

然后我一直在尝试使用或获取图像的宽度，但在使用上述代码创建元素后，它检索到0。

。你可以用

image.height

image.width

您得到0的原因是，当您执行该语句时，它不会加载。您必须等待图像加载并执行该语句。您可以使用

document.ready

，但问题是它可能不是100%准确的

参考：

您可以使用window.load（使用jquery），但根据上面的文章，这是有风险的

为了获得最好的解决方案，可以使用lib

您可以使用@Raman的技术，但问题是您必须将eventlistener附加到每个图像，这可能会变得笨拙

如果您使用的是imagesloaded，则可以查看容器中要加载的图像，并相应地执行代码

jsIDLE:

您需要在图像的

加载

上计算图像尺寸。是一把小提琴来证明这一点

image.addEventListener('load', function(){
  console.log(image.width);
  console.log(image.height);
});

这是因为图像尚未加载

<html>
<img  id="theImage" src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" />

<button id="Ok" value="Ok" onclick="ShowImageWidth()" />

<script type="text/JavaScript">
 //This runs when the page loads and shows 0
var element = document.getElementById('theImage');
     alert(element.width); 

//This runs AFTER the page has loaded and the button is clicked and shows 100
function ShowImageWidth() {
    var element = document.getElementById('theImage');
     alert(element.width); 
     }
</script>
</html>


//此操作在页面加载并显示0时运行
var元素=document.getElementById（'theImage'）；
警报（元素宽度）；
//这将在页面加载后运行，单击按钮并显示100
函数ShowImageWidth（）{
var元素=document.getElementById（'theImage'）；
警报（元素宽度）；
}

为什么要使用额外的库来完成这样的简单工作。只需一张图像就可以了，您可以添加一个侦听器。但是，如果你正在做一个项目。。我会认为它是一个可用于生产的代码，可以处理多个图像/资产，这并不简单！但是，如果它只是一个测试，那么eventlistener是好的：）。它的产品级代码，如果需要获取单个映像的维度，那么就不需要一个完整的JS库，这就是问题中提出的问题。顺便说一句，您的库还将加载事件侦听器附加到后台的元素上，因此它不像您正在保存

DOM

event listeners或其他任何事件侦听器来获得答案，@JeremyRajan。我的程序很简单，但你的答案在将来可能会有用。如果答案确实回答了你关于确定图像尺寸的问题，你能解释一下为什么答案会被标记下来吗？奇怪的是，我没有标记任何东西。无论如何，尽管在控制台日志中显示了图像的大小，但当我尝试在代码中使用变量

image.width

时，它仍然是零。。。我正在试图找出原因。请尝试仅在加载回调函数中使用此变量（

image.width

）。