javascript - 更改src属性后如何获取图像大小？

Question

我正在使用 jQuery 来更改图像源

var img = $("#image-holder img")
img.attr("src","uploads/image.jpg");

此时，如何获取图片的clientWidth和高度呢？我尝试过不同的方法，例如

img.width()
img.clientWidth
img.width

但其中一些不起作用，另一些则只是返回 0。

你有什么建议吗？

谢谢

Answer 1

您应该使用加载事件来获取图像宽度。

我为加载图像之前和之后创建了一个示例。

var img = $("#image-holder img");
img.attr("src","https://www.w3schools.com/images/compatible_chrome.gif");
console.log('before load: ' + img.width());

var load = function(e){

   console.log('after load: ' + e.width);
};

var img = $("#image-holder img");
img.attr("src","https://www.w3schools.com/images/compatible_chrome.gif");
console.log('before load: ' + img.width());

var load = function(e){
   //alert(e.width);
   console.log('after load: ' + e.width);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="image-holder">
  <img src="" onload="load(this)"/>
<div>