异步加载网页

Question

我在HTML5有一个WebApp。

这是link

我想异步加载整个网页。例如，当网页被访问时，我想向用户显示一个加载图像，页面在后台完全以异步模式加载。我尝试异步加载脚本，但这并不会对其行为产生太大影响。

有没有办法做到这一点！

Answer 1

尝试使用Tobias Krogh建议的相同方法。

而不是使用普通的老式JS将内容放在#main中

document.body.innerHTML = request.responseText;

使用Jquery通过.html()将内容放在主体中

$("body").html(request.responseText);

编辑:并使用JS加载器加载CSS & JS。可能的Lazyload或YepNope，以异步加载它们。这应该可以做好这项工作！

Answer 2

渲染一个只有一个加载图像作为背景集的空体...在头部，您有一个脚本标记，它在准备好的dom上执行ajax调用并加载所需的内容……

编辑:所需的内容当然应该包含所需的所有其他标记和脚本标记……然后用响应更新正文

document.body.innerHTML = request.responseText;

编辑2:我建议用原生javascript编写头脚本，因为您只需要不到1kb就可以对定义的url进行干净的(甚至是跨浏览器的ajax工作)调用……在ajax响应中，您可以确保任何内容都不会被重写或加载两次(如果您加载库，可能会有ajax功能)

Answer 3

您可以通过在css中设置某种类型的加载器来实现这一点(首先)，然后在页面完全加载后，使用javascripting删除覆盖(淡出)。

类似这样的http://jsfiddle.net/6Ldyd/

当然，你应该做一些回调函数，在页面的最后一个元素加载后移除覆盖(或者在最后一个元素加载后调用它的脚本)