对于图像纵横比计算图像被加载 2 次答案

【问题标题】：For image Aspect ratio calculation image is getting loaded 2 times对于图像纵横比计算图像被加载 2 次
【发布时间】：2020-11-03 06:59:14
【问题描述】：

我正在尝试解决图像为单个预览加载 2 次p>

第一次在iframe中加载图片以供预览

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

下图显示了加载同一张图片的 2 次：

在调用 8.9kB 和 8.6kB 时都将被加载，我想避免这种情况。

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

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

这里是演示： https://codepen.io/eabangalore/pen/rNLWJWE?editors=1010

为了重现：我们需要禁用缓存

请帮助我提前谢谢！！！

【问题讨论】：

请帮助我提前谢谢！

标签： javascript html jquery image

【解决方案1】：

您提出问题的方式非常令人沮丧，因为您创建了任意“限制”（例如 iframe、禁用缓存），但没有描述为什么需要这些限制。查看您的代码很明显，您在 web/javascript 方面没有太多工作经验，所以如果您告诉我们 what 您需要而不是如何，那就太好了em> 去做。我们可能会为您想出一个更好的解决方案。

无论如何，按照您提出的方式回答您的问题...您需要做的是在图像标签或 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)

如果您查看网络选项卡，您会看到只有一张图片通过互联网传输（第一个圆圈）。接下来的两个带圆圈的条目发生是因为 iframe/img src 属性已设置，但数据并未通过 Internet 加载（注意 url 如何以 data:image/jpeg... 开头）。

这是代码笔：

https://codepen.io/DesignByOnyx/pen/gOMKYzL?editors=1010

【讨论】：

【解决方案2】：

浏览器通常足够智能，不会从服务器两次获取相同的资产，这称为缓存。你的开发工具中的禁用缓存复选标记被选中，这意味着它不会使用缓存。这在开发时很有用，但您可以相信人们通常不会禁用缓存。

我也没有在 codepen 上看到相同的行为。

【讨论】：

无论你说什么都可能是正确的，但我想以编程方式解决它
在共享的codepen中，当点击查看图片按钮时，300.jpg图片对我来说只出现一次。
请禁用缓存，它会显示 2 次span>

【解决方案3】：

使用 iframe 实现此目的的唯一方法是，如果您可以控制它正在加载的域，或者有可以启用 cross origin resource sharing 的方法。这样您就可以访问 iframe 的 DOM 内容并从其中的图像元素中检索所需的信息。

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

仍然值得一提，正如另一个答案中所述，浏览器很可能不会两次获取图像，因此您无需担心。

【讨论】：