【ES6插件】致力于首屏加载速度优化的图片加载

x-loader是用于H5页面加载时，通过图片的加载的进度控制loading效果的ES6插件。

第一步。

通过import引入x-loader，通过new操作符创建一个新的xLoader对象。

// javascript import xLoader from './scripts/x-loader' new xLoader()

第二步。

创建一个id="xl-loader"制作loading效果，为正文的包裹层增加id="xl-wrapper"(可配置:其他HTMLElement)。

<img>标签摒弃传统src属性，使用data-src传入图片链接。

具有prior属性的图片会在loading效果关闭前加载完成，不具有prior属性的会在loading效果结束后，默认按顺序加载(可配置:同时加载)。

<!-- html --> <div id="xl-loader"></div> <div id="xl-wrapper"> <img data-src="./abc.jpg" prior> </div> 参数配置

自定义配置事例：

new xLoader({ wrapper: document.getElementById('自定义'), loader: document.getElementById('自定义'), attr: '自定义', // 可代替data-src属性 prior: '自定义', // 可代替prior属性 async: 'true or false' // loading结束后是否按序加载剩余图片 }).then(() => { // 当具有prior属性的图片加载全部完成时触发此函数 })

参数表

API

then()

在创建的xLoader对象，通过.then(fn())方法，传入函数,可以在具有prior属性的图片加载完成后触发。

v1.0.1 18.05.08 : 解决按序加载时，图片加载报错时卡住的bug。