jquery在src更改后获取图像宽度

Posted 2023-03-06

【中文标题】jquery在src更改后获取图像宽度

【英文标题】：jquery get image width after src change

【发布时间】：2011-12-28 23:24:18

【问题描述】：

我的 jquery 代码：

 img[i]='img-src';
 $("#popimage1").attr("src",img[i]);
 alert($("#popimage1").width());      //doesn't give the width of the current image, but it gives for the previous, and for first null

我的html代码：

 <img src="" id="popimage1"/>

所以概念是我使用 jquery 为每个 i 加载不同的图像 src，然后我对宽度和高度进行一些计算。问题是我使用前一个计数器 i 获取图像的值。我做了一个临时解决方案，把

  $("#popimage1").hide();
  setTimeout(alert($("#popimage1").width(),2000);
  $("#popimage1").show();

但它并不总是有效，并导致不必要的超时。 除了 alert 之外，还有另一个使用 img 宽度和高度的函数，为了方便起见，我只是写了 alert。任何帮助表示赞赏！

【问题讨论】：

Get real image width and height with javascript in Safari/Chrome? 的可能重复项

您是否尝试过使用那里的答案？它应该服务于您的目的。

嗯，问题有点不同，但第一个答案解决了我的问题，现在我又看到了..但我第一次没有意识到，无论如何我认为不锁定会很好这个话题，因为问题有点不同..谢谢大家！

【参考方案1】：

您必须先等待图片加载。

试试这个。

img[i] = "img-src";
$("#popimage1").attr("src", img[i]).load(function() 
  alert($("#popimage1").width());
);

【参考方案2】：

修改图片源是异步的，因此不会立即返回。

尝试处理load()

$("#popimage1").load(function() 
  alert($(this).width());
);

【参考方案3】：

请注意，.load 函数已被弃用 since jQuery 1.8。 使用 .on 函数和对应的事件名称：

$("#popimage1").on('load', function() 
    alert($(this).width());
)

参考：https://***.com/a/40252711/2893053