Dron 博客

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

以下这两种情况:

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

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

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

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

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

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

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