您是否必须将图像插入 DOM 以获取其尺寸？答案

【问题标题】：Do you have to insert an image into the DOM to get its dimensions?您是否必须将图像插入 DOM 以获取其尺寸？
【发布时间】：2013-12-17 09:55:57
【问题描述】：

是否必须将图像插入 DOM 以获取其尺寸？

Yanick 和许多其他人说是的，将 img 添加到屏幕外的 dom 以获取其尺寸（加载后）。

Alex、Nickf等人说不行，你可以创建一个不添加到dom的img元素。然后将加载其图像并调整其大小。

哪种观点适合“现代”浏览器？是否有任何测试可以涵盖这个问题。这是浏览器设计的行为吗？

添加：我正在寻找确认此行为的来源/参考。我已经有很多代码示例了。

【问题讨论】：

不，你可以创建 img 元素，它会有自己的尺寸
我的答案中的代码表明您可以创建图像并检索其宽度（或任何其他属性），而无需将其添加到 DOM 中。你希望它更清晰吗？

标签： image dom browser cross-browser

【解决方案1】：

无需将元素添加到 DOM 即可从中获取这些属性 - 只需创建 <img> 元素，即可在 JS 中访问尺寸。

【讨论】：

好的，你怎么知道的？您在哪些浏览器中测试过这种行为？是设计的行为还是怪癖。例如，看起来隐藏的 imgs 也被加载了。这会在某些浏览器中改变吗？

【解决方案2】：

试试这个：-

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>answer</title>
    </head>
    <body>
        <script>
            var img = new Image;
            img.onload = function(){alert(img.width);};
            img.src = "image.png";
        </script>
    </body>
</html>

这将alert 图像宽度（假设在与包含此htlm 的文件相同的文件夹中有一个名为image.png 的图像）。

【讨论】：

好的，你怎么知道的？您在哪些浏览器中测试过这种行为？是设计的行为还是怪癖。例如，看起来隐藏的 imgs 也被加载了。这会在某些浏览器中改变吗？
我知道这一点是因为我已经在 IE11、Chrome 31.0.1650.57m 和 FireFox 25.0.1 中对其进行了测试。我认为这不是一个怪癖，因为从统计上看，所有三种浏览器的开发团队都不太可能在他们的代码库中包含相同的怪癖。您的问题是，“您是否必须将图像插入 DOM 才能获得其尺寸？”，不会询问是否加载了隐藏的 imgs。它会改变吗？大概。这是一个无限的宇宙，还有很多时间要走。
感谢您的测试。我给了你支票。