Javascript 对于图像纵横比计算，图像将加载2次

我正在尝试解决图像加载2次的问题

第一次图像将在

iframe中加载以供预览

第二次图像元数据（如宽度、高度）将使用相同的路径获取

下图显示加载同一图像的2次：


在这两个调用中，8.9kB将被加载，我希望避免这种情况

问题：我想计算
图像
单次加载图像时的纵横比。2个我需要避免的电话

注意：我想要基于iframe的解决方案

这里是演示：

用于复制：我们需要禁用缓存

请帮我提前谢谢
 一般来说，浏览器足够智能，不会从服务器上两次获取同一资产，这称为缓存。选中devtools中的复选标记Disable cache，这意味着它将不使用缓存。这在开发时很有用，但您可以相信人们通常不会禁用缓存

我在代码笔上也看不到相同的行为。
使用iframe实现这一点的唯一方法是，如果您可以控制它正在加载的域，或者有一些方法可以启用它。这样，您将能够访问iframe的DOM内容，并从其中的image元素中检索所需的信息

另一个解决方案是首先避免使用iframe，这在您给出的示例中没有多大意义，但您已经说过您更喜欢保持这种方式

仍然值得一提的是，正如另一个答案中所述，浏览器很可能不会两次获取图像，因此您不必担心这一点。
您提出问题的方式非常令人沮丧，因为您创建了任意的“限制”（例如iframe，禁用缓存）但不要描述为什么这些限制是必要的。看看你的代码，很明显你在web/javascript方面没有太多的经验，所以如果你告诉我们你需要什么而不是如何做，那就太好了。我们可能会为您提供更好的解决方案

无论如何，用你问的方式回答你的问题。。。您需要做的是在图像标记或iframe（内存中）之外加载资源一次，对结果进行base64编码，并将编码数据用于iframe src和图像src。以下是伪代码：

// this first line will load the image
const imageData = fetchImageAsDataUrl('http://path-to-your-image');
// these next two lines use the existing image data from above
// you will see two entries in the "network" tab with urls like "data:image/jpeg..."
// but there was no additional data transferred across the internet
iframe.src = imageData;
img.src = imageData;
const dimensions = getImgDimensions(img)

如果查看“网络”选项卡，您将看到只有一个图像通过internet传输（第一个圆圈）。接下来两个带圆圈的条目之所以出现，是因为设置了iframe/img src属性，但没有通过internet加载数据（请注意url是如何以
data:image/jpeg…
开头的）


这是密码笔：

您所说的一切可能都是正确的，但我想在代码笔共享中以编程方式解决此问题。单击“查看图像”按钮时，300.jpg图像仅为我显示一次。请禁用缓存，使其显示两次。请帮助我，提前感谢！！