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

Question

我在颜色框中打开一个 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() 根本没有触发。可能是因为它 是在彩盒中加载的吗？

无论如何，这似乎很难做到！

Answer 1

试试这个

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