在Chrome中查询图像的高度/宽度

jQuery image height/width in Chrome

本文关键字：高度 宽度 图像 Chrome 查询      更新时间：2023-09-26

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

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。此外，当我在本地打开页面时，它似乎工作正常，但当托管在我的Web服务器上时，我会遇到这个问题。

以下是有问题的页面：http://swolepersonaltraining.com/testing/sorter/

好的，经过大量研究，我找到了一个解决方案。这并不完美，但这是我迄今为止想出的最好的。

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（）没有做任何事情，因为它检测到图像确实被加载了。

来自jQuery文档：

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

希望这能有所帮助！

这可能是用JavaScript获取图像的实际宽度和高度的重复？（在Safari/Chrome中）。那边有一篇详尽的文章。

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

相关文章：