Javascript预加载iframe而不阻止浏览器

Question

我有几个iframe加载后面有一个巨大的3D模型。

当我在我的网站上显示我的iframe时，我的浏览器会阻止这个iframe加载（可能是20秒......）

我正在寻找一种方法来预加载这些iframe而不会阻止浏览器。我尝试使用display none，ajax或者动态创建iframe但没有效果。

你有什么想法吗？谢谢！

Answer 1

AFAIK，没有干净的支持/标准方式预加载iFrame而不会阻止浏览器。

但是，有一些方法可以最小化这个“阻止”。为了给你一些观点，这里是浏览器阻止的地方：

• 加载脚本
• 加载大量外部资源（脚本/图像/ css /其他媒体）
• 重DOM操作
• 密集计算

要减轻脚本加载，您可以使用Loading Scripts Without Blocking等技术。如果你可以正确地进行浏览器缓存，那么iFrame中的页面将花费时间下载脚本，因为它已经在缓存中。

对于其他资源，如果适用，您可以使用相同的预加载技术来填充浏览器缓存。

重型DOM操作 - 您可以使用概述here和here的技术，这将有助于您减少重绘和回流。

如果可能，您可以调整ReactJs的功能，通过使用virtual DOM

来最小化浏览器DOM操作

您提到了3D模型计算，它们往往是计算密集型的。您应该查看使用Web Workers，它会将阻塞方面从主浏览器线程卸载到后台线程中。

所有这些技术相结合将最大限度地减少阻碍。如果您能够隔离并识别出最大瓶颈的部分，则无需实施所有技术。

希望这有帮助！

Answer 2

您应该能够在AJAX GET请求中加载<iframe>个网址，然后在加载后将其附加到文档中。

我写的内容如下：

var iframes = [{ location: "div1"; url: "url1.html" },{ location: "div2"; url: "url2.html" }];

iframes.forEach(function(current) {
  $.get(current.url).done(function() {
    $('#' + current.location).append('<iframe src="' + current.url + '"/>');
  });
});