前端资源预加载 resloader.js

为什么需要资源预加载

预加载的资源,浏览器会缓存下来

资源预加载的场景

范围应该锁定单页面应用,SPA的视图一般都是一步一步来呈现的,各种资源通过异步请求来获取,为了追求原生app般的流畅体验,可以把一些资源预加载下来。当然对于一些业务相关的图片资源,也可考虑延迟加载,但延迟加载不是本文讨论的范畴。

视图/图片较多的专题页面,或者是需要逐帧图片来完成的动画效果,最好都要做预加载。

HTML5游戏,图片一般都比较多,而且很多逐帧动画,必须要预加载,事实上一些游戏引擎都会提供相应功能。

哪些资源需要预加载呢?

web中包含的资源有很多种,图片、音视频之类的媒体文件

js、css文件不需进行预加载。现在写js基本都用requirejs之类的加载器,而且最后都会进行压缩合并,将请求数降到最低,最终只有一个文件,有些团队甚至还将压缩后的代码直接放在行内,这样一个多余的请求都没有了。

那么需要预加载的就是媒体文件了,图片、音视频之类。这类资源也得根据实际情况来选择哪些需要预加载。比如大多数页面装饰性图片就需要预加载,而由业务动态获取的图片则无法预加载(预先不知道地址)。用作音效、小动画的音视频可以预加载,一个半小时长的视频就不能预加载了。

resLoader.js

  1. 自定义资源列表,用于预加载
  2. 自定义onProgress,想展示成进度条还是百分比数字还是个性的设计都可
  3. 开始和结束可配置回调函数
  4. 只支持图片的预加载
  5. 支持amd、cmd加载器加载,同时支持直接用