html - 预加载的 iframe 池

Question

我的应用程序只是第一次加载一个真正的 HTML 页面(页眉、内容、侧边栏和页脚) .然后每次点击链接都会通过 AJAX 加载并显示(仅加载新的内容)。

一些 ajax 加载了一个或多个 iframe 的 content 内容。一些用户报告说，当他们点击某些页面(点击侧边栏链接)时，页面加载时间过长。他们报告的这些页面是内部有 4 或 5 个 iframe 的页面。应用程序发送如下内容:

<div>
    Content...
    <iframe style="display:none" src="URL1"></iframe>
    <iframe style="display:none" src="URL2"></iframe>
    <iframe style="display:none" src="URL3"></iframe>
    <iframe style="display:none" src="URL4"></iframe>
    More content...
</div>

Iframe 最初是隐藏的，并根据用户请求显示(不可能根据用户请求加载，因为这会使用户体验变得更糟)。所以问题是如何让这些 iframe 在页面加载时加载得更快。

我考虑过制作一个 iframe 池，所以我将在第一次页面加载时加载 5 个 iframe(当我加载页眉、边栏和页脚时)，然后按需重用这些 iframe，这样 AJAX 调用就会返回一段这样的代码:

<div>
    Content...
    <div class="iframe" style="display:none" src="URL1"></div>
    <div class="iframe" style="display:none" src="URL2"></div>
    <div class="iframe" style="display:none" src="URL3"></div>
    <div class="iframe" style="display:none" src="URL4"></div>
    More content...
</div>

success 回调将为每个 div.iframe 分配相应的 iframe。

是否足以加快页面加载速度并改善用户体验？是否有任何 jquery 插件或代码已经执行此操作或类似操作？还有其他选择吗？

Answer 1

伊万，

您可以完全加载第一个页面，然后开始使用 AJAX 将 iframe 加载到某种缓存(也许是 JSON 字符串？)。正如您所说 - 然后您可以在用户请求时加载缓存的内容。记住还要照顾那些禁用了 javascript 的人。

如果您发现在需要时加载 iframe 的请求(未预加载)，则值得调查加载缓慢的原因。直接加载 iframe src 会发生什么？

为什么要使用这么多 iframe？如果它们都指向外部网站，这将大大减慢加载时间，因为在您的 AJAX 请求将内容拉入您的页面之前，每个页面都必须呈现。如果它们指向内部(本地)页面，那么也许考虑不使用它们？