变态的网页加载进度条实现思路

2011-06-27 by Dron

以下这两种情况：

• 网页不间断地下载并逐步把已下载完成的部分呈现出来；
• 网页先显示出一个框架后，等待一切资源准备完成再一起呈现出来。

假设这两种情况所使用的时间一样，用户仍然会觉得后者比较慢或者卡，因为后者在准备资源的过程中，网页是静止不动的，给用户有了一段明显等待时间的感觉，而前者虽然也会有等待时间，但相对比较短。

很多中大规模的网页难以采取第一种方式，特别是现在富交互的网页，都需要准备很多资源和数据，为了缓和用户焦躁的心理，于是我们在等待过程中加入了 loading，显式的告知用户网页需要等待。最常见的 loading 形式是一张转圈圈的 gif 图。

但是转圈圈是不断反复的，用户并不能直观地知道他还需要等多久，对于资源或数据比较大的网页来说，转不了几圈，用户也仍然会有慢的感觉，容易被放弃，于是我们采用了加载百分比，显式地告诉他现在的进度，使用户更加有耐心。

网页加载百分比，这个 JS 是不能直接获取的，网上有灰常多投机取巧的办法，但最多也只能做到接近，而不是绝对准确，其实，加载百分比的这个数值，对于用户来说是毫无意义的，用户只要看到进度条有在动，就认为网页不卡，于是，我就有了下面的想法：

做一个进度条，它永远在前进，却永远走不到 100%，只能无限接近于 100%，等到资源或数据加载完成了，再突然地使进度条走满。具体思路：进条度分已加载和未加载两部分，已加载一直在增加，未加载一直在减少，已加载每次增加的量刚好等于未加载部分的 n%（n < 100），于是，效果就会是加载不断地接近 100% 却走不到 100%，而且还能看到进度条一直是动的，用户越是等待就越舍不得放弃，因为进度条没有停滞，用户会认为网页加载一直在进行。

我写了一个简单的 Demo，进条度每次增加剩余部分的 20%，为了演示加载完成，在 10s 后强制结束进度条，请点击这里查看。