财富预加载小插件:resLoader.js介绍

正文的重大终于来了。。。额

基于上边的规律,小编写了贰个插件,用来做能源预加载。

怀有的天性如下:

  1. 自定义能源列表,用于预加载

  2. 自定义onProgress,想显示存进度条仍然百分比数字照旧个性的布署都可

  3. 起始和了结可配备回调函数

  4. 只援救图片的预加载

  5. 援助amd、cmd加载器加载,同一时间帮助直接用<script>标签引进使用

  6. 不借助其余库

用法如下:

JavaScript

var loader = new resLoader({ resources : [
”,
”,
”,
”,
”,
”,
”,
”,
”,
”,
” ], onStart :
function(total){ console.log(‘start:’+total); }, onProgress :
function(current, total){ console.log(current+’/’+total); var percent =
current/total*100; $(‘.progressbar’).css(‘width’, percent+’%’);
$(‘.progresstext .current’).text(current); $(‘.progresstext
.total’).text(total); }, onComplete : function(total){
alert(‘加载完结:’+total+’个能源’); } }); loader.start();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var loader = new resLoader({
     resources : [
          ‘http://p2.qhimg.com/t01ed1438874f940dc0.jpg’,
          ‘http://p9.qhimg.com/t01b4ff03b72c7dc6c7.jpg’,
          ‘http://p2.qhimg.com/t01dd90dfbec92074d0.jpg’,
          ‘http://p7.qhimg.com/t01cfec6d87cde457c5.jpg’,
          ‘http://p9.qhimg.com/t01943ced462da67833.jpg’,
          ‘http://p0.qhimg.com/t01943ced462da67833.jpg’,
          ‘http://p6.qhimg.com/t01aa15a7ba7ccb49a7.jpg’,
          ‘http://p8.qhimg.com/t010f1e8badf1134376.jpg’,
          ‘http://p8.qhimg.com/t01cf37ea915533a032.jpg’,
          ‘http://p3.qhimg.com/t0193d8a3963e1803e9.jpg’,
          ‘http://p3.qhimg.com/t01cd6a4d4b4bd4457b.jpg’
     ],
     onStart : function(total){
          console.log(‘start:’+total);
     },
     onProgress : function(current, total){
          console.log(current+’/’+total);
          var percent = current/total*100;
          $(‘.progressbar’).css(‘width’, percent+’%’);
          $(‘.progresstext .current’).text(current);
          $(‘.progresstext .total’).text(total);
     },
     onComplete : function(total){
          alert(‘加载完毕:’+total+’个资源’);
     }
});
 
loader.start();

各队参数都直接明白,不再多说了。在上头的例子中,作者要好定义onProgress函数,做了多少个简便的进程条,你也可以做其他落成。函数为您传入了current和total,分别表示这几天完结的财富个数和能源总个数,可用以计算进程。

作用可看在线demo:等能源加载达成后再呈现页面【凯旋门074网址】。点击这里

其它附上下载地址,感兴趣的恋人能够拿去行使:

能源预加载的风貌

何以的档案的次序须要预加载能源呢?

等能源加载达成后再呈现页面【凯旋门074网址】。范围应该锁定单页面应用,SPA的视图一般都以一步一步来展现的,各类能源通过异步央求来获得,为了追求原生app般的流畅体验,可以把有个别能源预加载下来。当然对于一些业务相关的图纸财富,也可思虑延迟加载,但延迟加载不是本文切磋的局面。

视图/图片较多的专项论题页面,只怕是需求逐帧图片来达成的动画效果,最棒都要做预加载。

HTML5嬉戏,图片一般都相比较多,而且许多逐帧动画,必必要预加载,事实上部分游玩引擎都会提供相应成效。

等能源加载达成后再呈现页面【凯旋门074网址】。哪些资源必要预加载呢?

web中含有的财富有许多样,图片、音录制之类的媒体文件,其它正是js、css文件,这几个都需求发送央求来赢得。那那几个财富难道大家都预加载?

等能源加载达成后再呈现页面【凯旋门074网址】。自然不是了,预加载也是索要耗时的,总不可能让用户等您加载个几十分钟吧。具体预加载哪些财富,要求基于具体的设想,也跟你的类型有关。以下是局地自己的主张:

js、css文件不需举办预加载。未来写js基本都用requirejs之类的加载器,而且最终都会举行削减合併,将呼吁数降到最低,最后唯有一个文件,有个别团队还是还将削减后的代码直接放在行内,那样四个余下的诉求都未有了。

那正是说必要预加载的就是媒体文件了,图片、音录像之类。那类财富也得遵照实况来摘取如何供给预加载。举例大多页面装饰性图片就需求预加载,而由业务动态获取的图片则不可能预加载(预先不了然地方)。用作音响效果、小动画的音摄像能够预加载,三个半钟头长的摄像就不可能预加载了。

等能源加载达成后再呈现页面【凯旋门074网址】。前者能源预加载并出示进程条

2015/09/30 · JavaScript
· 预加载

原稿出处:
等能源加载达成后再呈现页面【凯旋门074网址】。吕大豹   

我们平常会看出,一些站点在第三遍跻身的时候会先出示叁个进程条,等能源加载完结后再显示页面,大致像这么:

凯旋门074网址 1

下一场一切页面包车型客车操作就能够十三分流利,因为从此没须求再等待加载财富了。越发是在移动端,或然是页游中,那样做能防止页面出现白屏(等待加载图片),相当的大程度提高用户体验。那这种技巧是怎么落到实处的呢?其实极度轻便,本文就来从基础细节商讨一番。

何以要求财富预加载

大概时候,大家的页面并不是叁遍渲染完结的,而是趁着用户的操作,不断修改DOM节点,假若您动态插入了三个图纸节点,那么浏览器要及时发一个http央求,把图纸加载下来然后渲染在页面上,假如用户此时的网速倒霉,那么加载那张图片大概就能够损耗几分钟时间,此时页面上什么样都不曾(白屏)。最坏的景色,假设你的运用图片好些个,半天加载不出几张图,用户很或许就在白屏的那几秒跳走了。在打闹中更要紧,主演的图纸如若加载不出来,让用户玩空气去?

除去在DOM中插入图片节点,别的凡是涉及到要展示一张新图片的操作,浏览器都得即时去央求图片。比方,为有些节点增加如下css类来充实背景图片:

CSS

.bg1{ backgroundnull:url(); }

1
2
3
.bg1{
     background: url(http://p2.qhimg.com/t01ed1438874f940dc0.jpg);
}

也许是动态修改了src属性、在canvas绘制图片等,这么些都会应声乞求新能源。

那么,能源预加载为何能一下子就解决了上述难点呢?

咱俩预加载的财富,浏览器会缓存下来,再一次利用的时候,浏览器会检讨是否一度在缓存中,假若在,则一向用缓存的能源,不发送诉求,大概由服务端重返304
not
modified(304只带央求头消息,不传输资源)。那样使用一张图片的时日会大大减缩,大家的页面看起来会足够流利,阿妈再也不用担心用户会跳走了~

也正是说,预加载的能源大家并不须要手动保存,由浏览器自动放到缓存了。

预加载的原理与加载进程的获得

下边都是空谈的有些见识,下边大家该从手艺的角度来合计一下预加载该怎么落到实处。

原理其实也一定轻便,就是保险贰个财富列表,挨个去加载列表中的财富,然后在每种财富加载成功的回调函数中立异速度就能够。

以图纸为例,大概的代码应该是如此:

JavaScript

var image = new Image(); image.onload = function(){}; image.onerror =
function(){}; image.src = url;

1
2
3
4
var image = new Image();
image.onload = function(){};
image.onerror = function(){};
image.src = url;

这么就OK啦,图片已经进缓存,留着现在使用呢。

况且进程,这几个速度严峻来说并不是文件加载的实时进程,因为大家只可以在每一种文件加载成功的时候实施回调,不能够像timeline中那样获得文件加载的实时进程。

总计方法就很轻松了,当前加载完的财富个数/财富总量*100,便是加载进程的比例了。

再多说两句,关于xhr2新天性

前方的废话貌似有个别多。。。想直接用插件的下载下去用就好,有标题在此留言钻探。

此处想多说的事物是关于加载进程的,笔者上边说了大家只能得到到的是速度其实是离散的点,不是连连的。其实采用HTML5的xhr2的新特色大家也能够品尝获得越来越纯粹的速度。因为xhr2新添了八个非常有趣的风味:能够从服务端获取文件数量。大家从前从服务端再次来到的数据都以字符串,今后得以一向重返Blob类型的文件。那么在此地做二个推测,能否应用此天性,做进一步纯粹的速度计算呢?我在此处只是建议一种恐怕,还未做施行。大家知晓xhr2新添的upload属性能够让大家获得到文件上传的速度消息,但对此重返的多寡,却爱莫能助直接提供进度音信,所以要想借助它来促成还得做任何干活。

2 赞 3 收藏
评论

凯旋门074网址 2

相关文章