Question

我想在将图片添加到浏览器之前输出图像的宽度和高度。当然，我的宽度为0，高度为0，因为图像尚未附加到DOM。

我已将上传我的代码发送到http://jsfiddle.net/BF5En/4/

如何在将图像附加到DOM之前采用正确的值？

先谢谢！

Answer 1

你似乎有非常有趣的问题。这是我谦虚的回答：

$(document).ready(function() {
    $(".Photos a").click(function () {
        var href_attribute = $(this).attr('href');
        var new_item = $('<img src="' + href_attribute + '" />')
            .hide()
            .load(function () {
                alert('Img was loaded! Width: ' + this.width + ' and height: ' + this.height);
            })
            .fadeIn(2000)
            .appendTo('.AppendingDiv');
        return false;
    });
});

实例：http://jsfiddle.net/hobobne/BF5En/10/

你知道，你必须确保图像是预先加载的，因为我们使用.load()。否则你会得到 0 。这实际上很好，因为这意味着脚本可以工作，只是一切都很快，它可以获得尺寸。 .load()确保首先加载图片，然后才接收尺寸。

出于任何目的，您想要使用尺寸，我建议您也在.load()内进行。因为反正可能会有多个.Photos a。

另外，您可能已经注意到.fadeIn(2000)无效。那是因为，你的项目在你调用之前已经附加了。如你所见，我为你解决了这个问题：）

NB！抱歉，我重命名了一些变量（在我的头脑中做了更多的逻辑。）

Answer 2

var MyitemWidth = item.css('width');
var MyitemHeight = item.css('height');

请参阅此回答Getting auto size of IMG before adding it to DOM (Using JQuery)

DOM elements have dimensions only when added to a parent, as dimension is determined by the 
rendering engine. To go around this issue, have a <div> container absolutely positioned off 
screen, add the image to it first, get the dimension, then add the image at it's final destination.

如何在将图像附加到DOM /浏览器之前获取图像的宽度/高度？

2 个答案: