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

175 阅读 0 评论 116 点赞

我是靠谱客的博主帅气电脑，最近开发中收集的这篇文章主要介绍jQuery oLoader实现的加载图片和页面效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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