如何在IE中确定动态加载图像的img宽度/高度？

Question

我的标记是一个id为"load"的简单div元素.使用jQuery然后我将图像元素列表加载到这个div中:

$('#load').load('images.html', { }, function() {
  $(this).onImagesLoad({
    selectorCallback: function() {
      ....do something....
    }
  });
});

其中images.html是这样的列表:

<img src='1.jpg' caption='img 1'>
<img src='2.jpg' caption='img 2'>
...

为确保完全加载所有图像,我使用onImagesLoad插件.到目前为止,这在所有浏览器上都可以正常工作.

然而,在IE8(我也假设其他版本的IE)然后迭代img元素时,我无法确定加载的图像的宽度/高度.image.context.naturalWidth和naturalHeight属性似乎不起作用.

如何掌握图像的尺寸？

谢谢堆:)

更新

@Simon:这对IE不起作用,也打破了其他浏览器.

@Jenechka:如果"imageDomElement"只是我上面示例中"image"变量的另一个名称,那么它就不起作用了.或者你对DomElement的意思是什么？

Answer 1

已经有一段时间了，但我终于找到了一些时间再次修补这个问题。上述问题仍然存在，但我认为是这样的。

当我加载初始图像时，是的，文件被加载并生成图像对象。但这些属性似乎还不正确，直到图像实际添加到站点的 DOM 并渲染后才会正确。IE 上 hide() 上的 div/图像没有任何尺寸信息，在 Safari 上有一些可用信息。例如，无需在任何地方添加以下 div

var test = $("<div><img src='test.jpg'></div>")

其中包含的图像具有以下信息：

• width() = 0,
• attr("width") = 600,
• css("width") = ""， 和
• img[0].clientWidth = 0。

这是在 Safari 上；attr("width") = 0在 IE 上，除了和 之外，其他都是相同的css("width") = "auto"。现在我无法使用它，这就是破坏我的脚本的原因以及我发布最初问题的原因。然而，当我附加这个 div 并渲染它时，所有正确的值都会显示在图像对象中。

我正在写一个小画廊，它显示了我加载的第二个 .html 文件中的所有图像；然而，该画廊会计算并放置缩略图，并准备以全分辨率显示的图像。为了让这个看起来不错，我基本上想创建整个隐藏的东西，然后将其淡入。可惜，这整个想法似乎不会成功。一位朋友建议将所有内容加载到左侧不可见的小 iframe 中，然后使用它。也许这就是要走的路。

我注意到的另一件事似乎与上述加载问题密切相关，那就是clone()。似乎如果渲染图像，

var newimg = img.clone()

生成与我上面必须处理的相同的“空”图像对象。即使原始图像可见并且包含所有正确的属性，它的克隆图像也不可见。

现在，除了重新思考和重写我的画廊的部分内容之外，我看不到任何其他方法。