使用 jQuery 动态创建图像并检索尺寸

发布于 2024-12-17 17:14:01 字数 321 浏览 0 评论 0原文

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

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

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

原文

So I am dynamically creating an image and I wish to get the image dimensions. Is it possible to do this before the image is attached to the DOM? At the moment I am doing this:

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

but the height and width are both reported as zero. The image is actually being fetched as I can see the GET request in firebug.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满意归宿 2024-12-24 17:14:01

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

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

回复收藏 0 原文

漫漫岁月 2024-12-24 17:14:01

也许这会有所帮助：

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

此方法是 .bind('load', handler) 的快捷方式。
当元素和所有子元素完全加载时，将向该元素发送加载事件。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。
例如，考虑一个包含简单图像的页面：
事件处理程序可以绑定到图像：
$('#book').load(function() {  
   // 调用 .load() 的处理程序。  
});  

maybe this will help:

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

This method is a shortcut for .bind('load', handler).
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
For example, consider a page with a simple image:
<img src="book.png" alt="Book" id="book" />
The event handler can be bound to the image:
$('#book').load(function() {  
   // Handler for .load() called.  
});  

回复收藏 0 原文

~没有更多了~