Question

我正在尝试记录图像的宽度，我尝试的每件事都会返回0.任何想法为什么？这是我到目前为止所做的。

的jQuery

var imgWidth = $('#imageMap').width();
console.log(imgWidth);

生成图像的ERB

 <% @image.each do |image| %>
      <% image.contacts.each do |conn| %>
        <span class="connection" data-pos-x="<%= conn.pos_x %>" data-pos-y="<%= conn.pos_y %>"  data-pos-width="<%= conn.pos_width %>" data-pos-height="<%= conn.pos_height %>"> </span>
      <% end %>
      <%= f.hidden_field :image_id, value: image.id %>  
      <%= image_tag(image.image.url(:large), id: 'imageMap')  %>
  <% end %>

Answer 1

如果img标签本身在其样式属性中没有宽度或者设置了宽度属性，则只要图像未完全加载，返回的宽度就为0。使用“load”事件来检测此信息或在图像上手动设置宽度（如果您知道）：

$('#imageMap').attr('src', 'your_image.jpg').load(function() {  
    console.log($(this).width());
});

Answer 2

您需要先加载图片

$("<img/>").attr("src", "path/image.jpg" ).load(function() {
  var pic_real_width = this.width;  
  var pic_real_height = this.height;
}

Answer 3

jQuery中的典型用法是使用document.ready()，但这并不能确保加载<img>个元素。

而是使用window.load()

$(window).load(function() {
  // check image widths here
});

您还可以在单个DOM元素上连接load()，但这种方法不允许轻松迁移到document.ready()

Answer 4

除非加载图像，否则无法测量图像尺寸，这可能需要一些时间，具体取决于文件大小（大图像）。最简单的方法是为尺寸（高度，宽度）定义CSS属性。

如果每张图片的尺寸不同，您需要深入了解Javascript中的图片回调。

Answer 5

我已经测试过你使用的jquery函数，这绝对没问题......

var imgWidth = $('#imageMap').width();

如果有多个具有相同ID的元素，它将返回具有该ID的第一个元素的宽度。
如果具有该id的元素根本不存在，它将返回null。
如果图片位置不正确或未加载＆amp;在没有提供宽度的情况下，只有它会返回0.

据我说，你的问题应该在于第三种情况。因此，如果您稍后在代码中的某处下载图像，那么您应该在onload函数或$（Document）中编写该部分.ready（）;

.width（）为图像宽度返回0

5 个答案: