异步加载网页

Question

我有一个HTML5的WebApp。

这是链接

我想异步加载整个网页。比如当用户访问网页时，我想显示一个加载图片，并在后台完全异步加载页面。我尝试异步加载脚本，但它对其行为影响不大。

这种可能吗！

- Narendra Rajput

Answer 1

在页面中渲染一个只有加载图像作为背景的空白主体... 在head标签中，您需要一个脚本标签，在dom准备好后进行ajax调用并加载所需内容...

编辑：当然，所需的内容应包含所有其他必要的标记和脚本标签... 然后使用响应更新主体

document.body.innerHTML = request.responseText;

编辑2：我建议使用本地JavaScript编写head脚本，因为你只需要不到1kb的代码就可以干净地（即使跨浏览器）调用定义的URL……在您的ajax响应中，您可以确保没有被覆盖或加载两次的内容（除了可能是ajax功能，如果您加载了一个库）

- Tobias Krogh

---

我尝试了这个！但是问题是内容被显示出来了，但脚本在页面上不再运行。 - Narendra Rajput

Answer 2

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

但是，与其使用简单的 JS 将内容放在 #main 中，

document.body.innerHTML = request.responseText;

使用jQuery的.html()方法将内容放入标签中。

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

编辑： 使用JS加载器加载CSS和JS。 可以使用Lazyload或YepNope，以异步方式加载它们。 这样就可以完成工作了！

- Viren Rajput

---

脚本已经能够运行，但仍然存在问题。 - Narendra Rajput

Answer 3

你可以通过在CSS中设置某种可见的覆盖层和加载程序来实现这一点，当页面完全加载后，使用JavaScript将覆盖层（淡化）删除...

像这样 http://jsfiddle.net/6Ldyd/

当页面上的最后一个元素加载完成后，你应该制作一些回调函数来移除覆盖层（或编写脚本在最后一个元素加载后调用它）

- drinchev

---

但是这种方法仍然需要预先加载所有元素，因此速度仍然很慢。通过ajax加载主体肯定是更好的选择。 - gopi1410

如果您将CSS文件放置在页面（HTML文件）的顶部，并将脚本放置在页面底部，则浮层div将在浏览器接收到响应数据的前几KB时呈现。因此，用户将在浮层上看到加载程序并等待其余的脚本/ HTML加载。 - drinchev