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

Posted 2023-03-06

【中文标题】如何确定 IE 中动态加载图像的 img 宽度/高度？

【英文标题】：How can I determine img width/height of dynamically loaded images in IE?

【发布时间】：2011-02-26 13:40:35

【问题描述】：

我的标记是一个简单的 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 是什么意思？

【参考方案1】：

怎么样？

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

【参考方案2】：

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

当我加载初始图像时，是的，文件被加载并生成图像对象。但似乎属性还不正确，直到图像实际添加到站点的 DOM 并渲染后才会正确。 IE 上 hide() 上的 div/image 没有任何尺寸信息，在 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()。似乎如果渲染图像，一个

var newimg = img.clone()

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

现在，除了重新思考和重写我的画廊的某些部分之外，我没有其他办法。

【参考方案3】：

改用下面的代码

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

【讨论】：

有什么理由使用 $(this)[0].clientWidth 而不是 this.clientWidth？

查看我对 Ryley 最初帖子的评论。

【参考方案4】：

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

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

见here，这可能不是你使用它的方式，但我不熟悉这个 onImagesLoad 东西。

【讨论】：

感谢您的链接，但那里的代码并未反映该场景。我没有将 元素嵌入到 中，而是从外部 .html 文件中加载（） 元素的列表。我怀疑额外加载图像元素，将它们嵌入 DOM，并在“图像准备好”时调用回调（无论这对浏览器意味着什么！）会导致我在不同浏览器上看到的问题。

【参考方案5】：

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

【参考方案6】：

imageDomElement.width
imageDomElement.height

或者试试

imageDomElement.clientWidth
imageDomElement.clientHeight

【参考方案7】：

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

image.width()

和

image.height()