javascript - width() 没有返回值

Question

我正在尝试获取页面中的一张图片的宽度。

<img class="zoomerIcon" src="zoomer.png" />

所以我试图获得这样的宽度。

var imageWidth = $('.zoomerIcon').width();

但是，除非我在标记中设置宽度属性，否则该值为 0。

如果在属性中手动设置，width() 是否只返回大于 0 的宽度？您可以在此处查看整个脚本。

http://www.wantedcreative.com/development/zoomer/index.html

谢谢

Answer 1

更新

抱歉，我应该先查看您的来源。这是您需要更改代码的方式。重要的是要意识到，在图像完全加载之前你无法获得宽度。这就是我使用 load 事件回调来检索宽度的原因:

// Create the img element, add a load handler, then append it to the body
var $img = $('<img class="zoomIcon" alt="zoom icon" />').load(function(e){
  // get icon image properties for use with animation
  var imageWidth = $(this).width();
  var imageHeight = $(this).height();

  // ... any code that uses these variables needs to go in here ...

}).attr('src', zoomImage).appendTo( document.body );

原始答案:这是一般信息。

您可能将此代码放在 document.ready 中，它将尝试在图像加载之前检索宽度。试试这个:

$(window).load(function(){
   var imageWidth = $(".zoomer").width();
   alert( imageWidth ); // Should be correct
});