jQuery oLoader实现的加载图片和页面效果
jQuery oLoader实现的加载图片和页面效果
开元中国2015 发表于3年前
jQuery oLoader实现的加载图片和页面效果
  • 发表于 3年前
  • 阅读 70
  • 收藏 14
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

oLoader使用方法

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

调用jQuery oLoader非常简单,一句话如下:

[js] view plaincopy

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


使用oLoader加载图片:

[js] view plaincopy

  1. $(function(){   

  2.   

  3.   $('img').oLoader({   

  4.   

  5.     waitLoad: true,   

  6.   

  7.     fadeLevel: 0.9,   

  8.   

  9.     backgroundColor: '#fff',   

  10.   

  11.     style:0,   

  12.   

  13.     image: 'loader.gif'   

  14.   

  15.   });   

  16.   

  17. });  


使用oLoader加载页面:

[js] view plaincopy

  1. $('#ajax').oLoader({   

  2.   

  3.   url: 'test.html',   

  4.   

  5.   updateOnComplete: false   

  6.   

  7. });  


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

[js] view plaincopy

  1. {   

  2.   

  3.   image: 'images/loader.gif',  //加载动画图片   

  4.   

  5.   style: 1, //loader样式   

  6.   

  7.   modal: true//模态遮罩,如果为false,则不会显示遮罩层   

  8.   

  9.   fadeInTime: 300, //遮罩层淡入速度,毫秒   

  10.   

  11.   fadeOutTime: 300, //遮罩层谈出速度,毫秒   

  12.   

  13.   fadeLevel: 0.7, //遮罩层透明度,0-1   

  14.   

  15.   backgroundColor: '#000'//背景色   

  16.   

  17.   imageBgColor: '#fff'//loader动画图片背景   

  18.   

  19.   imagePadding: '10',   

  20.   

  21.   showOnInit: true//初始化显示加载动画   

  22.   

  23.   hideAfter: 0, //time in ms   

  24.   

  25.   url: false//Ajax调用参数,下同   

  26.   

  27.   type: 'GET',   

  28.   

  29.   data: false,   

  30.   

  31.   updateContent: true//是否替换ajax返回内容   

  32.   

  33.   updateOnComplete: true,//是否立即替换服务器返回的内容   

  34.   

  35.   showLoader: true//是否显示loader图片   

  36.   

  37.   effect: ''//动态效果,支持door,slide,doornslide   

  38.   

  39.   wholeWindow: false//when true, oLoader covers the whole window   

  40.   

  41.   lockOverflow: false//locks body's overflow while loading   

  42.   

  43.   waitLoad: false//当元素内容加载完才显示内容   

  44.   

  45.   checkIntervalTime: 100, //interval which checks for position changes   

  46.   

  47.   //回调函数   

  48.   

  49.   complete: ''//当动画结束,内容加载完调用   

  50.   

  51.   onStart: ''//动画开始时调用   

  52.   

  53.   onError: '' //当ajax请求出错时调用   

  54.   

  55. }   

  56.   

  57. oPageLoader使用方法  

  58.   

  59. oPageLoader可以实现漂亮的加载页面时的进度条动画,调用oPageLoader也非常简单,如下:  

  60.   

  61. $(function(){   

  62.   

  63.   $.oPageLoader();   

  64.   

  65. });   

  66.   

  67. oPageLoader提供了丰富的选项和方法调用。  

  68.   

  69. {   

  70.   

  71.   backgroundColor: '#000'//背景色   

  72.   

  73.   progressBarColor: '#f00'//进度条颜色   

  74.   

  75.   progressBarHeight: 3, //进度条高度   

  76.   

  77.   progressBarFadeLevel: 1,    

  78.   

  79.   showPercentage: true,   

  80.   

  81.   percentageColor: '#fff',   

  82.   

  83.   percentageFontSize: '30px',   

  84.   

  85.   context: 'body',   

  86.   

  87.   affectedElements: 'img,iframe,frame,script',   

  88.   

  89.   ownStyle: false//如果设置为ture,则可自定义进度条样式   

  90.   

  91.   style: "<div id='ownage_page_loader_text'>0%</div><div id='ownage_page_loader'></div>",   

  92.   

  93.   lockOverflow: true,   

  94.   

  95.   images: [], //array of additional images, such as those from css files   

  96.   

  97.   wholeWindow: true,   

  98.   

  99.   fadeLevel: 1,   

  100.   

  101.   waitAfterEnd: 0,   

  102.   

  103.   fadeOutTime: 500,   

  104.   

  105.   //callbacks   

  106.   

  107.   complete: false//当页面加载完动画结束时执行   

  108.   

  109.   completeLoad: false//当页面已经加载不需要动画结束就执行   

  110.   

  111.   update: false   

  112.   

  113. }  


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

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

data.loaded:已加载的元素。

data.percentage:百分比。

使用方法:

[js] view plaincopy

  1. $.oPageLoader({   

  2.   

  3.   update: function(data) {   

  4.   

  5.     //here you can work   

  6.   

  7.     //with data.percentage   

  8.   

  9.     //     data.loaded   

  10.   

  11.     //     data.total             

  12.   

  13.   }   

  14.   

  15. });  


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

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


共有 人打赏支持
粉丝 32
博文 112
码字总数 128032
×
开元中国2015
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: