在 colorbox 插件中加载后如何获取实际图像宽度和高度？

Question

我在 colorbox 中打开 MVC 视图。该视图加载一个图像，我让用户在其上添加注释。在我的注释插件工作并渲染画布之前，我需要 知道加载图像的宽度和高度。这设置了画布尺寸。

我能够在 FF、Chrome、Opera 中很好地获取图像的宽度和高度。 但在 IE8 中，我总是将图像宽度和高度设为 0

有没有人可以帮助我一次获取图像尺寸 图像已加载？

这是我如何调用 colorbox 打开我的 MVC 视图：

<a href="site/photos/album/1234" class="notes colorbox"></a>

这是视图：

<div id="dvImg">
    <img id="imgAnnotate" src="path/abc.jpg" />
</div>

$(function () {
    $("#imgAnnotate").load(function () {
        Width = this.width;
        Height = this.height;
        alert('W=' + Width + ' H=' + Height); <-- IE shows as W=0 H=0
    });
});

我还尝试了 imagesLoaded 插件，但在 colorbox 上不起作用：

$(function () {
    var $dvImg = $('#dvImg');
    function loopImages($images) {
        $images.each(function () {
            alert('h6=' + $(this).height() + ' w6=' + $(this).width()); //FF says 0
            alert('h7=' + this.height + ' w7=' + this.width); //FF OK!!! not IE
        });
    }

    $dvImg.imagesLoaded(function ($images) {
        loopImages($images);
    });
});

另一点： $(window).load() in视图根本不发射。可能是因为它 已加载到彩盒中？

不管怎样，这看起来非常非常难做到！

Answer 1

试试这个

var Width = $(this).css("width");
var Height = $(this).css("height");