jquery.width 在图像上返回 0

Posted 2023-02-26

【中文标题】jquery.width 在图像上返回 0

【英文标题】：jquery.width return 0 on image

【发布时间】：2012-06-27 17:35:25

【问题描述】：

我正在使用如下代码：

img.load(function()
    // do some stuff
    $(this).width();

);

在我的回调中，图像大小始终为 0。这可能与它有关，但我的图像是本地加载的。

但事实上，如果我这样做了 this.width，我会得到预期的宽度，然后我可以从这里做一些计算来改变我的 extjs 窗口。

经过一些尝试，我意识到如果我执行 $(this) 我更改的所有属性似乎根本没有任何效果。

$(this).width(40); 不会改变图像的宽度，但this.width = 40 会改变图像的宽度。就好像$(this) 正在将我的 htmlImageElement 复制到一个新元素中，只有当我再次添加到 dom 以替换旧元素时，才会应用这些更改。

我不太清楚那里发生了什么。

编辑

这是我的img 变量包含的内容。

img = $('<img>');
img.attr('src', '....image');

编辑 2

这并没有真正改变 jQuery 不处理内存中图像的图像大小的事实，但我觉得任何使用 Extjs 的人不要重复我的错误是件好事。就我而言，一个大问题是我使用的img 对象是一个有效对象，但由于我使用的是 ExtJs，因此我无意中犯了一个愚蠢的错误。我以这种方式创建了我的窗口...

Ext.create('Ext.Window', 
  // some settings
  items: [
      html: img.wrap('<div>').parent().html(),
  // etc

换句话说，我创建的事件是在 img 上，但我从未真正将 img 添加到 DOM。 ExtJs 将 html 文本添加到 DOM 中，从而创建了一个无法通过事件等修改的新对象。

所以我必须创建一个 id 来查找新元素，所有这些都必须在调用 modalWindow.show() 完成后完成。之后一切正常。

对于调整窗口大小，如果设置了尺寸，您可以将它们设置回null 并在窗口上执行 doLayout 调用，它将重新计算窗口大小。

【问题讨论】：

你能发布相关的 HTML 吗？此外，您不需要 jQuery。您应该可以直接使用 javascript 访问该属性。

该代码中变量img 的值究竟是什么？换句话说，它是如何设置的？

.load()的第一个参数应该是你要加载的URL，然后是完整的函数。 img 是什么？

@sachleen 它也是一个event aka onload

图片是通过display: nonecss隐藏的吗？

【参考方案1】：

您发现jQuery(this).width() 不适用于内存中的图像。选择是使用this.width/height 或将其附加到页面并阅读。

【讨论】：

所以我坚持使用 this.width 和 this.height 因为我无法再次将其添加到页面中？

是的，你需要使用 this.width，如果你真的想要，你可以使用 attr()。这里没什么大不了的。

我想是的，我看到一年前关于 jQuery.width 的评论说同样的话。这是一种奇怪的行为。它必须与布局以及如何计算尺寸有关，但图像仍然不依赖于除自身和 css 之外的任何其他东西

【参考方案2】：

我觉得你应该试试这个……

 $("img").load(function()
    // do some stuff
    $(this).width();

);

假设您只使用 img 标签。如果你有 img 标签的 id，你应该使用例如$("#idimg).load(fun...... 续)