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

Question

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

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

有谁可以帮我一次获取图像尺寸吗图像已加载？

以下是我调用 colorbox 打开 MVC View 的方法:

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

这是 View :

<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);
    });
});

另一点: View 中的 $(window).load() 根本没有触发。可能是因为它已加载到 colorbox 中？

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

Answer 1

试试这个

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