jQuery oLoader实现的加载图片和页面效果

oLoader使用方法

不管是oLoader还是oPageLoader都是基于jQuery，所以调用前请先加载jquery库，作者已经将两个插件集成到一起：jquery.oLoader.min.js，已经打包好请戳源码下载。

调用jQuery oLoader非常简单，一句话如下：

[js] view plaincopy

1. $(‘#element‘).oLoader();

使用oLoader加载图片：

[js] view plaincopy

1. $(function(){
2. $(‘img‘).oLoader({
3. waitLoad: true,
4. fadeLevel: 0.9,
5. backgroundColor: ‘#fff‘,
6. style:0,
7. image: ‘loader.gif‘
8. });
9. });

使用oLoader加载页面：

[js] view plaincopy

1. $(‘#ajax‘).oLoader({
2. url: ‘test.html‘,
3. updateOnComplete: false
4. });

当然，它还提供了丰富的选项和回调函数，根据具体需求进行设置。

[js] view plaincopy

1. {
2. image: ‘images/loader.gif‘,  //加载动画图片
3. style: 1, //loader样式
4. modal: true, //模态遮罩，如果为false，则不会显示遮罩层
5. fadeInTime: 300, //遮罩层淡入速度，毫秒
6. fadeOutTime: 300, //遮罩层谈出速度，毫秒
7. fadeLevel: 0.7, //遮罩层透明度，0-1
8. backgroundColor: ‘#000‘, //背景色
9. imageBgColor: ‘#fff‘, //loader动画图片背景
10. imagePadding: ‘10‘,
11. showOnInit: true, //初始化显示加载动画
12. hideAfter: 0, //time in ms
13. url: false, //Ajax调用参数，下同
14. type: ‘GET‘,
15. data: false,
16. updateContent: true, //是否替换ajax返回内容
17. updateOnComplete: true,//是否立即替换服务器返回的内容
18. showLoader: true, //是否显示loader图片
19. effect: ‘‘, //动态效果，支持door,slide,doornslide
20. wholeWindow: false, //when true, oLoader covers the whole window
21. lockOverflow: false, //locks body‘s overflow while loading
22. waitLoad: false, //当元素内容加载完才显示内容
23. checkIntervalTime: 100, //interval which checks for position changes
24. //回调函数
25. complete: ‘‘, //当动画结束，内容加载完调用
26. onStart: ‘‘, //动画开始时调用
27. onError: ‘‘ //当ajax请求出错时调用
28. }
29. oPageLoader使用方法
30. oPageLoader可以实现漂亮的加载页面时的进度条动画，调用oPageLoader也非常简单，如下：
31. $(function(){
32. $.oPageLoader();
33. });
34. oPageLoader提供了丰富的选项和方法调用。
35. {
36. backgroundColor: ‘#000‘, //背景色
37. progressBarColor: ‘#f00‘, //进度条颜色
38. progressBarHeight: 3, //进度条高度
39. progressBarFadeLevel: 1,
40. showPercentage: true,
41. percentageColor: ‘#fff‘,
42. percentageFontSize: ‘30px‘,
43. context: ‘body‘,
44. affectedElements: ‘img,iframe,frame,script‘,
45. ownStyle: false, //如果设置为ture，则可自定义进度条样式
46. style: "<div id=‘ownage_page_loader_text‘>0%</div><div id=‘ownage_page_loader‘></div>",
47. lockOverflow: true,
48. images: [], //array of additional images, such as those from css files
49. wholeWindow: true,
50. fadeLevel: 1,
51. waitAfterEnd: 0,
52. fadeOutTime: 500,
53. //callbacks
54. complete: false, //当页面加载完动画结束时执行
55. completeLoad: false, //当页面已经加载不需要动画结束就执行
56. update: false
57. }

回调函数update，是当页面元素加载完时调用，返回data数据为：

data.total：加载的元素总数。

data.loaded：已加载的元素。

data.percentage：百分比。

使用方法：

[js] view plaincopy

1. $.oPageLoader({
2. update: function(data) {
3. //here you can work
4. //with data.percentage
5. //     data.loaded
6. //     data.total
7. }
8. });

以上就是本文给大家分享的jQuery oLoader插件的使用方法，希望大家能够喜欢。

参考来源： 
jQuery oLoader实现的加载图片和页面效果
http://www.lai18.com/content/349849.html