jQuery如何获取img宽度

Posted 2023-05-07

我的需求是直接<img src="" class="img" />
这样插入图，因为 插入的图片 大小比例全部未知，不可能预先设置好CSS
然后，我想获取改图片的宽度，但是因为没有设置属性，他的宽度其实是'atuo'，我用jQuery获取 $('.img').width() 获取到的值是0

这怎么办啊？？ 怎么获取图片的宽度

参考技术A jQuery执行是在DOM加载完成之后图片加载完之前，所以获取到的值是0 参考技术B img本身就会根据图片源文件的size设置的宽高的 参考技术C var img = new Image();
img.src =$('.img').attr("src") ;
var w = img.width;
var h = img.height;本回答被提问者采纳 参考技术D 你把图片在photoshop中打开不就知道宽度了？jQuery取宽度只能把jquery的代码写在图片的下面，让服务器加载好图片后再运行jquery代码，因为浏览器是从上到下来解析的，你写在上面，图片还没有加载，取到的当然是0;

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

【中文标题】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