如何在没有重新加载页面的情况下设置src属性后获得图像宽度

我有一个函数，如果我传递一个图像源，它应该修改$（“＃image”）元素的src属性，当我点击一个不在表单内的按钮时调用此函数（这意味着该页面未重新加载）

function modify_image(image_src){ $("#image").attr("src", image_src); } 

他的src改变后我怎么能得到这个图像的宽度？

Answer 1

加载图像是异步的，所以你必须等到它被加载才能获得宽度：

 function modify_image(image_src){ $("#image").on('load', function() { var width = this.width; }) .attr("src", image_src) .each(function() { if (this.complete) $(this).trigger('load'); }); } 

始终在附加onload事件处理程序后更改源，对于缓存的图像，您必须检查this.complete属性并this.complete触发onload事件。

Answer 2

图像更新后将触发加载事件：

 $("#image").attr("src", image_src) .load(function () { $(this).width(); // the new image width }) 

Answer 3

您可以使用加载function

 function modify_image(image_src){ var img = new Image(); img.src = image_src; img.onload = function () { var width = img.width; }; $("#image").attr("src", img.src); } 

在加载函数中，您可以获取其属性，如高度

Answer 4

这是我的口味：

  function modify_image(image_src){ $("#image").attr("src", image_src).load(function () { console.log($(this).width()); }); }