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

所属分类: 网络编程 / JavaScript 阅读数: 1652
收藏 0 赞 0 分享

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插件的使用方法,希望大家能够喜欢。

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多