当前位置：首页 > 网页特效 > 进度条

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

分类：进度条日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<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元素作为遮罩层，里面放置作为预加载指示器的元素。

```html
<div id="preloader">
    <div id="preloader-inner"></div>
</div>   
``` 
#####  初始化插件
可以使用preloader()方法来初始化该loading指示器插件。

```html
$(window).preloader();      
```         
或者在初始化时传入配置参数。

```html
$(window).preloader({
    option: 'value'
}); 
```           
#####  配置参数
该loading指示器插件的可用配置参数有：

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

------------

预加载之前触发的事件：

```html
$(window).on('preloader:before', function(){
 
}); 
```                 
预加载之后触发的事件：

```html
$(window).on('preloader:after', function(){
 
});
```