javascript - Chrome 中的 jQuery 图像高度/宽度

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:

Can cease to fire for images that already live in the browser's cache

希望这有帮助!