javascript - 为什么我无法计算出具有自动宽度的元素的宽度？

Question

我正在尝试创建图像的横向幻灯片放映。包含幻灯片的面板正好是 1200 像素宽。在页面加载时，PHP 会在此面板中加载图像。图片的数量并不总是相同的，除非加载图片的总宽度超过 1200px 容器的宽度，否则我不希望幻灯片放映开始。

问题是，所有图片的尺寸都不尽相同，从 150x100 到 1980x1200 不等。通过将图像的高度设置为 50 并让它们的宽度自动重新缩放，图像适合条形。

现在，用任何其他编程语言创建这个幻灯片面板会很容易。不过，我在 javascript 中受苦，因为我根本找不到任何方法来获取图像的新宽度。他们都读取 width: 0px 使用 jQuery outerWidth()

我什至尝试在 1200px 面板内放置一个 div 包装器，在图像外部，希望 div 会自动缩放图像的宽度并给我它们的总宽度，但它读取的是 1200px (jQuery outerWidth())

有没有办法测量它们的宽度？
有更简单的方法吗？

感谢任何帮助

Answer 1

我猜你试图在 document 准备好时获取宽度，而不是在图像加载之后。

尝试将获取 outerWidth() 的代码放在 $(window).load() 中。

$(window).load(function() {
    //get the image widths
});