jQuery oLoader实现的加载图片和页面效果
oLoader使用方法
不管是oLoader还是oPageLoader都是基于jQuery,所以调用前请先加载jquery库,作者已经将两个插件集成到一起:jquery.oLoader.min.js,已经打包好请戳源码下载。
调用jQueryoLoader非常简单,一句话如下:
$('#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,//timeinms url:false,//Ajax调用参数,下同 type:'GET', data:false, updateContent:true,//是否替换ajax返回内容 updateOnComplete:true,//是否立即替换服务器返回的内容 showLoader:true,//是否显示loader图片 effect:'',//动态效果,支持door,slide,doornslide wholeWindow:false,//whentrue,oLoadercoversthewholewindow lockOverflow:false,//locksbody'soverflowwhileloading waitLoad:false,//当元素内容加载完才显示内容 checkIntervalTime:100,//intervalwhichchecksforpositionchanges //回调函数 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:"<divid='ownage_page_loader_text'>0%</div><divid='ownage_page_loader'></div>", lockOverflow:true, images:[],//arrayofadditionalimages,suchasthosefromcssfiles 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){ //hereyoucanwork //withdata.percentage // data.loaded // data.total } });
以上就是本文给大家分享的jQueryoLoader插件的使用方法,希望大家能够喜欢。