preloader是一款小巧的jQuery页面预加载loading指示器插件。通过该插件可以在页面加载的时候显示预定义的loading指示器动画，并在页面加载结束之后将它关闭。

安装

可以通过bower来安装该loading指示器插件。

$ bower install core-themes-jquery-preloader --save

使用方法

在页面中引入jquery和jquery.preloader.min.js文件，examples.css文件中是预定义的loading指示器的样式。

<link href="css/examples.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.preloader.min.js" type="text/javascript"></script>
HTML结构

使用一个<div>元素作为遮罩层，里面放置作为预加载指示器的元素。

<div id="preloader">
    <div id="preloader-inner"></div>
</div>
初始化插件

可以使用preloader()方法来初始化该loading指示器插件。

$(window).preloader();

或者在初始化时传入配置参数。

$(window).preloader({
    option: 'value'
});

配置参数

该loading指示器插件的可用配置参数有：

参数 类型 默认值 描述
selector string '#preloader' loading指示器的容器选择器。
type string 'document' 预加载方法的类型。
removeType string 'fade' 移除预加载容器的方法。
fadeDuration int 750 预加载指示器淡出的时间。
delay int 0 在页面加载之后多长时间移除loading指示器。

事件

预加载之前触发的事件：

$(window).on('preloader:before', function(){

});

预加载之后触发的事件：

$(window).on('preloader:after', function(){

});

preloader预加载指示器插件的github地址为：https://github.com/core-themes/preloader