jquery - 使用 jQuery 动态创建图像和检索尺寸

Question

所以我正在动态创建图像，我希望获得图像尺寸。是否可以在图像附加到 DOM 之前执行此操作？目前我正在这样做：

 var arrow = $('<img src="' + parameters.arrowRight + '" />');
 arrow.load(function() {  
      console.log("size: " + $(this).height() + " " + $(this).width());
  });

但高度和宽度都报告为零。该图像实际上正在被获取，因为我可以在 firebug 中看到 GET 请求。

Answer 1

不可以。在任何元素附加到 DOM 之前，都无法获取它的尺寸。

一种解决方法是为图像提供 css: margin-left: -10000px。然后您可以附加它，但它不可见。然后，您可以获得它的尺寸并根据需要进行处理。

Answer 2

也许这会有所帮助：

http://api.jquery.com/load-event/

此方法是 .bind('load', handler) 的快捷方式。

当元素和所有子元素都已完全加载时，加载事件将发送到该元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。

例如，考虑一个带有简单图像的页面：

<img src="book.png" alt="Book" id="book" />

事件处理程序可以绑定到图像：

$('#book').load(function() {  
   // Handler for .load() called.  
});