0

我正在尝试记录图像的宽度，而我尝试的每件事都返回 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 %>
4

5 回答 5

5

如果 img 标签本身在其 style 属性中没有宽度或没有设置宽度属性，则只要图像尚未完全加载，则返回的宽度为 0。使用“加载”事件来检测这一点或在图像上手动设置宽度（如果你知道的话）：

$('#imageMap').attr('src', 'your_image.jpg').load(function() {  
    console.log($(this).width());
});
于 2013-08-06T20:02:58.443 回答
1

您需要先加载图像

$("<img/>").attr("src", "path/image.jpg" ).load(function() {
  var pic_real_width = this.width;  
  var pic_real_height = this.height;
}
于 2013-08-06T20:02:35.057 回答
1

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

而是使用window.load()

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

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

于 2013-08-06T20:05:59.687 回答
0

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

如果每个图像的尺寸不同，您将需要更深入地了解 Javascript 中的图像回调。

于 2013-08-06T20:01:30.603 回答
0

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

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

  1. 如果有多个具有相同 id 的元素，它将返回具有该 ID 的第一个元素的宽度。

  2. 如果以某种方式具有该 id 的元素根本不存在，它将返回 null。

  3. 如果图像位置不正确或未加载并且同时您没有提供宽度，那么它只会返回 0。

根据我的说法，你的问题应该在于第三种情况。因此，如果您稍后在代码中的某个位置下载图像，那么您应该在 onload 函数或 $(Document).ready(); 中对该部分进行编码。

于 2013-08-06T20:24:16.757 回答