Question

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

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

你们中的任何一个JQuery天才都知道一个代码可以完美无缺地动态地将真正的Width和Height添加到容器中的每个img元素中个人被渲染？

我想也许代码可以进行图像宽度检查width > 0来评估图像实际渲染的时间，然后激发。但我不知道如何去做，让它稳定地运作。怎样才能解决这个问题？

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

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

Answer 1

试试这个：

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

<强> EDITED

好吧，我尝试了类似的东西，当我使用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';
          });
  });
})

demo

Answer 2

是的，您可以使用width()和height()方法获取图片的尺寸。感谢JQuery。

更多信息：

的 width()

的 height()

更新Baded On Comment：

当所有图片和外部资源与DOM一起加载到页面中时，load偶然会被触发，因此您可以使用它并使用width()和height()方法获取图像的尺寸。例如：

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

Answer 3

使用$（document）.ready（）等待图像完全加载。

ready（处理程序）

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

虽然JavaScript在呈现页面时提供了执行代码的加载事件，但在完全接收到所有资源（如图像）之前，不会触发此事件。

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（））。 ;）

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

[编辑]：您也可以put the image data, which you just loaded via AJAX, directly into your source code而不是依赖缓存。不幸的是，这显然不适用于IE。

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

要使用函数like this one对数据进行编码。

如何向动态img元素添加维度

5 个答案: