最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-10 07:27浏览(1523)

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

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

分类:其它特效 > jQuery插件 难易:中级
查看演示

加我微信,拉你进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           //加载的元素总数
  } 
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/151.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2