X-BUILD

X-LOAD

通过预加载、懒加载、顺序加载控制图片下载方式，主要针对H5页面的Loading加载进度实现。

安装

  • 通过 npm or yarn 安装：
npm install x-load --save

引用

  • 通过包管理器安装：
import XLoad from 'x-load';

本项目通过 rollup 使用 UMD 格式打包，支持 AMD、CommonJS、script 标签引入，下载源码

起步

  1. 正文包裹层增加 id="root" ，将你的所有正文内容写在这个 div 下。

  2. X-BUILD 项目已经在 index.pug 中定义好 div#root ，所有的内容写在 app.pug 内即可。

  3. <img> 标签使用 data-src 传入图片链接，不要设置 src 属性。

  4. 至少给一个 <img> 标签增加属性 prior ，表示此图片需要优先加载。

<!-- html -->
<div id="root">
  <img data-src="./abc.jpg" prior>
</div>

参数

实例化 XLoad 时，传入 object 配置参数：

new XLoad({
  // ...
});

wrapper

#root <HTMLelement>

传入正文包裹层 DOM。

loader

null <HTMLelement>

如果需要自定义 loading 效果，请将自定义 DOM 传入。

attr

'data-src' <String>

当 <img data-src="url"> 命名冲突时改变此项。

prior

'prior' <String>

当 <img prior> 命名冲突时改变此项。

sync

true <Boolean>

默认同步加载（按顺序加载），控制 <img prior> 图片加载完成后剩余图片加载方式，设置为 false：异步加载(同时加载所有图片)。

loadImg

null <String>

图片路径，用于未加载完成图片的背景图，注意：使用 webpack ，请使用 require()。

beforeLoading(object)

none <Function>

当实例化完成后触发。

  • object <Object> 指向实例

nextTickLoading(percent)

none <Function>

每一个 <img prior> 加载后时触发（不论成功或失败）。

  • percent <Number> 当前图片加载进度，值为0-1的小数。

afterLoading()

none <Function>

所有 <img prior> 加载完成后执行。

  • object <Object> 指向实例

← X-ANIMATE →