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

Question

我的标记是一个简单的 div 元素，id 为“load”。然后，我使用 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

如果您尚未调整图像大小，您可以使用：

image.width()

和

image.height()

Answer 2

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

当我加载初始图像时，是的，文件被加载并生成图像对象。但这些属性似乎还不正确，直到图像实际添加到站点的 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 上；在 IE 上，除了 attr("width") = 0 和 css("width") = "auto" 之外，其他都是相同的。现在我无法使用它，这就是破坏我的脚本的原因以及我发布最初问题的原因。然而，当我附加这个 div 并渲染它时，所有正确的值都会显示在图像对象中。

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

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

var newimg = img.clone()

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

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

Answer 3

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

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

请参阅 这里，这可能不完全是你使用它的方式，但我不熟悉这个 onImagesLoad 东西。

Answer 4

imageDomElement.width
imageDomElement.height

或尝试

imageDomElement.clientWidth
imageDomElement.clientHeight

Answer 5

如果你使用 jquery，那么 image.attr(width) 应该可以解决问题
但为什么不使用 document.ready 来代替呢，这样可以减少你的头痛。 。

Answer 6

使用下面的代码代替

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

Answer 7

又怎样呢？

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