Question

我的应用程序首次加载一个真实的HTML页面（标题，内容，侧栏和页脚）。然后通过AJAX加载链接的每次点击并显示（只需加载新的内容）。

某些ajax加载内容内容包含一个或多个iframe。有些用户报告说，当他们点击某些页面时（单击侧栏链接），该页面需要花费太多时间来加载。他们报告的这些页面是里面有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>

和成功回调会为每个 div.iframe 分配相应的iframe。

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

Answer 1

伊万，

你可以完全加载你的第一页，然后开始使用AJAX将iframe加载到某种缓存中（也许是JSON字符串？）。如您所说 - 然后您可以在用户请求时加载缓存的内容。请记住也适合那些禁用了javascript的人。

如果您发现需要加载iframe（非预加载）的请求，则值得研究加载速度慢的原因。直接加载iframe src会发生什么？

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

Answer 2

首先：只要您可以控制所有内容并且没有严肃的论据，就不应该使用iframe。他们增加了一些开销，对搜索引擎优化并不好，并且使用起来不太方便。

还尝试使初始页面加载尽可能轻量级。不要预加载所有内容，而是使用异步调用来获取其余内容（从用户最有可能接下来请求的内容开始）。

不要害怕让用户等一段时间。他习惯了这样一个事实，即当点击一个链接时，就会有一些等待时间。重要的是，您指出发生了某些事情（使用spinner）。

使用AJAX时的另一个重要方面是历史。用户希望后退（和前进）按钮按预期工作。 AJAX本身并不支持。考虑使用像this one这样的jquery历史记录来显着改善应用程序的用户友好性。

我会这样做：

<div id="content1" style="display:none"></div>
<div id="content2" style="display:none"></div>
<div id="content3" style="display:none"></div>

loadContent();

function loadContent(){
   // asynchronously load content1, upon success content2, and so on,
   // until all resources are loaded
}

现在你的ajax调用只包含每个div的数据而没有任何开销。这节省了带宽并加快了加载时间 - 通过分解内容，客户端可以更快地响应（如果您没有通过此方法产生更多http请求的问题）。

预加载的iframe池

2 个答案: