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()根本没有触发。可能是因为它加载到彩盒？

无论如何，这似乎非常难以做到!!

Answer 1

试试这个

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

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

1 个答案: