加载HTML页面而无需等待某些部分加载

Question

我有一个简单的HTML页面，其中包含许多部分，其中一部分

<div id="external_data">...</div>

从外部源渲染数据并加载。 加载时间很长，因此页面的所有其他部分也要等到该部分加载完毕。

有没有办法使用jQuery或其他方法来将<div id="external_data">的内容设置为loading image并加载页面的其余部分而不依赖于该部分？ 以及我该如何实现？

Answer 1

如果该div的内容在服务器端呈现并与页面的其余部分一起提供，则可以使用以下两个选项：

1）为包含div的页面提供服务，其中包含您提到的加载图形，然后在页面加载时使用jQuery使用$ .post或$ .get加载div的内容。 这将使该页面可以在没有任何其他后端逻辑的情况下提供。

2）如果您不喜欢使用$ .post或$ .get，则可以在该div中放置一个iFrame，以引用另一个包含div内容的页面。 这将与页面分开加载，因此不会造成麻烦。 但是，请注意，iFrame在大小，边框等方面有时会在浏览器之间表现异常。请确保您的代码已在所有主要浏览器（主要是IE）中进行了测试，以确保它们在所有主流浏览器中都正常。