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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
学习php笔记 字符串处理
2010/10/19 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP微信分享开发详解
2017/01/14 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
Python学习笔记之if语句的使用示例
2017/10/23 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
食品安全工作实施方案
2014/03/26 职场文书
消防工作实施方案
2014/06/09 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
公司董事任命书
2015/09/21 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers