隐藏 iframe 但以某种方式解除它

Question

我正在创建一个托管 360 度全景摄影的网站。我基本上是使用带有平铺缩略图的 iframe 创建 360 度幻灯片。当用户点击一个磁贴时，它会通过 JS 通过更改 iframe 的 src 值将该 360 加载到 iframe 中。

我的问题是带宽，如果我使用将 src 值加载到 iframe 中的方法，那么每次发生这种情况时，它似乎都会重新加载内容 - 在浏览器中查看我的网络选项卡似乎确实如此，如果用户重新查看磁贴/iframe，我可以看到图像文件第二次重新加载。

我的另一个选择是拥有多个 iframe，然后根据单击的图块隐藏或显示它们。也许使用“显示：无”？

但是，这是否会造成同时运行多张 360 全景照片并对用户计算机/显卡造成负担的问题？还是会 display:none 然后让 iframe 不再为显卡创建工作？

有没有办法告诉 iframe 在隐藏时是否已脱离并且不再对用户计算机征税？

如果是的话，有没有办法解决这个问题？是否可以解除 iframe 以使其无法运行，但仍可以再次对用户可见，而无需再次重新加载内容。

谢谢，我希望这是有道理的。

Answer 1

我认为您的问题可以通过以下两种方式解决：延迟加载和可见性。

你可以通过原生方式实现延迟加载

<iframe src="your-360-image" loading="lazy"></iframe>

或者使用其中一个库，Iframely 和 lazyframe 是很好的。

您可以将所有 iframe 设置为在用户靠近它们时在后台开始加载，因此当用户单击图块时，它已经加载。

关于浏览器重新加载图片，可能是因为你将display设置为none，或者甚至将元素从DOM中完全移除。您可能只想通过将visibility 设置为hidden 来隐藏它，这不应该再次重新加载它。