你的位置:首页 > 软件开发 > Java > 网站预加载进度条的实现

网站预加载进度条的实现

发布时间:2015-06-13 00:00:44
我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,大概像这样:    然后整个页面的操作就会非常流畅,因为之后没必要再等待加载资源了。尤其是在移动端,或者是页游中,这样做能避免页面出现白屏(等待加载图片),很大程度提升用户体验。那这种技术是如 ...

网站预加载进度条的实现

我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,大概像这样:

  网站预加载进度条的实现

  然后整个页面的操作就会非常流畅,因为之后没必要再等待加载资源了。尤其是在移动端,或者是页游中,这样做能避免页面出现白屏(等待加载图片),很大程度提升用户体验。那这种技术是如何实现的呢?其实非常简单,本文就来从基础细节探究一番。

为什么需要资源预加载

     大多时候,我们的页面并不是一次渲染完毕的,而是随着用户的操作,不断修改DOM节点,如果你动态插入了一个图片节点,那么浏览器要马上发一个http请求,把图片加载下来然后渲染在页面上,如果用户此时的网速不佳,那么加载这张图片可能就会消耗几秒钟时间,此时页面上什么都没有(白屏)。最坏的情况,如果你的应用图片很多,半天加载不出几张图,用户很可能就在白屏的那几秒跳走了。在游戏中更严重,主角的图片如果加载不出来,让用户玩空气去?

     除了在DOM中插入图片节点,其他凡是涉及到要展示一张新图片的操作,浏览器都得即时去请求图片。比如,为某个节点添加如下css类来增加背景图片:

view sourceprint?1..bg1{1.var image = new Image();01.var loader = new resLoader({

原标题:网站预加载进度条的实现

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录