如何为动态 img 元素添加尺寸

Question

我使用 Json 调用来获取图像地址列表，然后将它们单独添加到这样的 div 中。不幸的是，图像尺寸不是 Json 信息的一部分。

<div id="container">
   <img src="A.jpg" alt="" />
   <img src="B.jpg" alt="" />
   ...
</div>

你们中的任何 JQuery 天才是否知道可以完美地动态地将真实的 Width 和 Height 添加到容器中的每个 img 元素的代码< strong>每个单独的渲染完成后？

我在想也许代码可以进行图像宽度检查 width > 0 来评估图像何时实际渲染，然后触发。但我不知道如何去做并使其稳定工作。解决这个问题的最佳方法是什么？

更新，正如答案所指出的，将宽度或高度添加到 元素很常规。这 这里的问题实际上是写一个 知道何时做什么的代码 那。并评估该条件 每张图片而不是整个页面。

更新2
我找到了一个非常好的工作答案 这里

Answer 1

试试这个：

$('#container img').css('height', function(index, value){
    return $(this).height()+ 'px';
})
$('#container img').css('width', function(index, value){
    return $(this).width() + 'px';
})

编辑

好的，我已经尝试过类似的方法，当我使用 firebug 检查元素时，高度和宽度属性是否具有正确的值......

$(document).ready(function(){

  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo("body");
            if ( i == 999 ) return false;
          });
          $('img').css('height', function(index, value){
              return $(this).height()+ 'px';
          });
          $('img').css('width', function(index, value){
              return $(this).width()+ 'px';
          });
  });
})

演示

Answer 2

是的，可以，您可以使用 width() 和 height() jQuery 方法来获取图像的尺寸。

更多信息：

• width()
• height()

根据评论更新：

负载 甚至在所有图像和外部资源与 DOM 一起加载到页面中时触发，因此您可以使用它并使用 width() 和 height()获取图像尺寸的方法。例子：

$(window).load(function(){
  // your code to get dimensions, manipulate images, etc
})

Answer 3

使用 $(document).ready() 等待图像完全加载。

准备好（处理程序）

handler - DOM 准备好后执行的函数。

虽然 JavaScript 提供了在页面渲染时执行代码的 load 事件，但只有在完全接收到所有资源（例如图像）后，才会触发该事件。

Reigel 的解决方案，现在使用 $(document).ready():

$(document).ready(function() {
    $('#container img').css('height', function(index, value){
        return $(this).height()+ 'px';
    });
    $('#container img').css('width', function(index, value){
        return $(this).width() + 'px';
    });
});

[编辑]: 刚刚意识到，当您在页面加载后插入图像时，这可能不起作用，但我想值得一试：

$('#mydiv').html('<img .../><script language="javascript" type="text/javascript">$(document).ready(...)</script>');

Answer 4

$('#container img').each(function(){
var pic_real_width;
var pic_real_height;

$(img).load(function() {
    // Remove attributes in case img-element has set width and height
    $(this).removeAttr("width")
           .removeAttr("height")
           .css({ width: "", height: "" }); // Remove css dimensions as well

    pic_real_width = this.width;
    pic_real_height = this.height;
});

var src = img.src;
img.src = "";
img.src = src; // Triggers onload if image is cached
});

功劳归于 Xavi

Answer 5

另一个建议：

通过 AJAX 在后台加载图像，并希望浏览器缓存它们，以便当您将元素添加到 div 时它们会立即出现（并且您可以立即检索 width() 和 height()）。 ;)

如果您有权访问发送这些图像的网络服务器：请确保设置适当的缓存标头。

[编辑]：您也可以 放置图像数据，而不是依赖缓存，您刚刚通过 AJAX 直接将其加载到源代码中。不幸的是，这显然在 IE 中不起作用。

<img src="data:<mimetype>;base64,<data>" />

要对数据进行编码，请使用像这样的函数。