Question

我正在尝试获取图像的宽度/高度，以便设置父容器的宽度/高度。这是我的代码：

var current_img = temp.find(".test-img").attr('src', c['img']).addClass("active-image");

然后我通过

获取图像宽度/高度

current_img.css('width');

我遇到的问题是chrome在图像之前加载了jscript，因此该函数返回null。所以我把这段代码放在一起：

$(".test-img").each(function (index) {
                        $(this).load(function() {
                            imgwidth = $(this).css('width');
                            imgheight = $(this).css('height');
                                if (imgwidth != "0px" && imgheight != "0px")
                                    $(this).parent().addClass('center').css({'width' : imgwidth, 'height' : imgheight});
                                    });
                    });

这在第一次加载页面时似乎工作正常，但是当调用该函数时，它返回null。此外，当我在本地打开页面时，似乎工作正常，但是当我在我的网络服务器上托管时，我遇到了这个问题。

以下是相关网页：http://swolepersonaltraining.com/testing/sorter/

Answer 1

好的，经过大量研究后，我找到了解决方案。这并不完美，但到目前为止我已经提出了最好的。

var img = new Image(); //create new image
$(img).append("div").fadeIn('fast', function() { //We use the callback function from fadein
    var width = $(img).width(); 
    var height = $(img).width();
});

这个工作依赖于fadeIn只会在图像正确加载后执行该功能。我的问题是我正在清空包含图像的div并重新填充它，但它仍然在浏览器中缓存。因此，img.load（）没有做任何事情，因为它检测到图像确实被加载了。

From the jQuery documentation:

可以停止为那些图像开火已经存在于浏览器的缓存中

希望这有帮助！

Answer 2

这可能是Get the real width and height of an image with JavaScript? (in Safari/Chrome)的副本。那边有一个彻底的写作。

Answer 3

使用$('img').css('width')得到图片样式的width属性值而不是实际图片的宽度，请改用$('img').width()。

Chrome中的jQuery图像高度/宽度

3 个答案: