小巧的jQuery页面预加载指示器插件

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指示器插件的可用配置参数有：

事件

预加载之前触发的事件：

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

});                  
                

预加载之后触发的事件：

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

});               
                

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