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

我的标记是一个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'>
...

...

为了确保所有图像都被完全加载，我使用了这个插件。到目前为止，这在所有浏览器上都能正常工作

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

我如何掌握图像的维度

谢谢你：）

更新

@西蒙：这在IE上不起作用，也破坏了其他浏览器

---

@Jenechka：如果“ImageDomeElement”只是上面示例中“image”变量的另一个名称，那么它就不起作用。或者你说的DomeElement是什么意思？

如果你还没有调整图像的大小，你可以使用：

image.width()

及

或尝试

imageDomElement.clientWidth
imageDomElement.clientHeight

---

如果您使用jquery，那么image.attr（width）应该可以做到这一点

---

但是为什么不使用document.ready来代替它呢，它可以减少你的头痛

这与其他答案非常相似，但我已经在IE7中对其进行了测试，因此它可能更接近您想要的：

$(document).onImagesLoad({
  selectorCallback: function() {
      $('img').each(function(){
         alert($(this).width()+', '+$(this).height()); 
      });
  }
});

---

看，这可能不是您使用它的确切方式，但我不熟悉onImagesLoad这个东西。

请使用以下代码

$(document).onImagesLoad({
      selectorCallback: function() {
          $('img').each(function(){
             alert($(this)[0].clientWidth +', '+$(this)[0].clientHeight); 
          });
      }
    });

---

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

当我加载初始图像时，如果是，则加载文件并生成图像对象。但是这些属性似乎还不正确，直到图像被实际添加到站点的DOM中并进行渲染，它们才会正确。IE上hide（）上的div/image没有任何维度信息，Safari上有一些可用信息。例如，不在任何地方添加以下div

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

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

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

那怎么办

$("#load img").each(function() {
   var img = new Image();
   img.src = this.src;
   alert(img.height + " x " + img.width);
});

---

是否有任何理由使用$（this）[0].clientWidth而不是this.clientWidth？请参阅我对Ryley最初文章的评论。感谢链接，但那里的代码没有反映该场景。我没有将元素嵌入到（）中，而是从外部.html文件加载一个元素列表。我怀疑额外加载图像元素、将它们嵌入DOM以及在“图像就绪”时调用回调（无论对浏览器意味着什么！）会导致我在不同浏览器上看到的问题。

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

var newimg = img.clone()

$("#load img").each(function() {
   var img = new Image();
   img.src = this.src;
   alert(img.height + " x " + img.width);
});