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

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

image.width()

和

image.height()

Answer 2

这与其他答案非常相似，但是我已经在IE7中测试了它，所以它可能更接近你想要的：

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

请参阅here，这可能与您使用它的方式不完全相同，但我对此不熟悉onImagesLoad。

Answer 3

imageDomElement.width
imageDomElement.height

或尝试

imageDomElement.clientWidth
imageDomElement.clientHeight

Answer 4

如果你使用jquery，那么image.attr（width）就可以了但是为什么不使用document.ready代替，可以减少headeache。

Answer 5

使用以下代码

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

Answer 6

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

当我加载初始图像然后是，加载文件并生成图像对象。但似乎这些属性还不正确，直到图像实际添加到网站的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()

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

现在我没有看到任何其他方式，只能重新思考和重写我的画廊部分。

Answer 7

怎么样？

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

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

7 个答案: