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


Posted in Javascript onMarch 14, 2015

oLoader使用方法

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

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

使用oLoader加载图片:

$(function(){ 

  $('img').oLoader({ 

    waitLoad: true, 

    fadeLevel: 0.9, 

    backgroundColor: '#fff', 

    style:0, 

    image: 'loader.gif' 

  }); 

});

使用oLoader加载页面:

$('#ajax').oLoader({ 

  url: 'test.html', 

  updateOnComplete: false 

});

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

{ 

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

  style: 1, //loader样式 

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

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

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

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

  backgroundColor: '#000', //背景色 

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

  imagePadding: '10', 

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

  hideAfter: 0, //time in ms 

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

  type: 'GET', 

  data: false, 

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

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

  showLoader: true, //是否显示loader图片 

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

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

  lockOverflow: false, //locks body's overflow while loading 

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

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

  //回调函数 

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

  onStart: '', //动画开始时调用 

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

} 

oPageLoader使用方法

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

$(function(){ 

  $.oPageLoader(); 

}); 

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

{ 

  backgroundColor: '#000', //背景色 

  progressBarColor: '#f00', //进度条颜色 

  progressBarHeight: 3, //进度条高度 

  progressBarFadeLevel: 1,  

  showPercentage: true, 

  percentageColor: '#fff', 

  percentageFontSize: '30px', 

  context: 'body', 

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

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

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

  lockOverflow: true, 

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

  wholeWindow: true, 

  fadeLevel: 1, 

  waitAfterEnd: 0, 

  fadeOutTime: 500, 

  //callbacks 

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

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

  update: false 

}

回调函数update,是当页面元素加载完时调用,返回data数据为:
data.total:加载的元素总数。
data.loaded:已加载的元素。
data.percentage:百分比。
使用方法:

$.oPageLoader({ 

  update: function(data) { 

    //here you can work 

    //with data.percentage 

    //     data.loaded 

    //     data.total           

  } 

});

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

Javascript 相关文章推荐
Javascript学习笔记二 之 变量
Dec 15 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
jQuery实现购物车数字加减效果
Mar 14 #Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 #Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 #Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 #Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 #Javascript
jQuery插件实现大图全屏图片相册
Mar 14 #Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 #Javascript
You might like
php中数据的批量导入(csv文件)
2006/10/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python中的装饰器用法详解
2015/01/14 Python
Python中的列表知识点汇总
2015/04/14 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
利用python实现AR教程
2019/11/20 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
高级Java程序员面试要点
2013/08/02 面试题
工艺工程师工作职责
2013/11/23 职场文书
请假条怎么写
2014/04/10 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS