jQuery+oLoader加载图片和页面效果

收藏

我们经常会遇到加载图片和页面的效果，今天我们就介绍oLoader和oPageLoader这两个方法。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

演示一：加载图片

$(function(){ 
  $('img.img').oLoader({ 
    waitLoad: true, 
    fadeLevel: 0.9, 
    backgroundColor: '#fff', 
    style:0, 
    image: 'loader.gif' 
  }); 
});

演示二：加载页面

$('#ajax').oLoader({ 
  url: 'ajax.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可以实现漂亮的加载页面时的进度条动画，默认调用代码如下：

$(function(){ 
  $.oPageLoader(); 
});

回调函数update

$.oPageLoader({ 
  update: function(data) { 
    //with data.percentage //百分比
    //     data.loaded  //已加载的元素
    //     data.total           //加载的元素总数
  } 
});