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

前端之家收集整理的这篇文章主要介绍了jQuery oLoader实现的加载图片和页面效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

oLoader使用方法

不管是oLoader还是oPageLoader都是基于jQuery,所以调用前请先加载jquery库,作者已经将两个插件集成到一起:jquery.oLoader.min.js,已经打包好请戳源码下载。 调用jQuery oLoader非常简单,一句话如下:

代码如下:

使用oLoader加载图片

代码如下:

使用oLoader加载页面

代码如下:

当然,它还提供了丰富的选项和回调函数,根据具体需求进行设置。

代码如下:
图片 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: "
0%
", 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:百分比。 使用方法

代码如下:

以上就是本文给大家分享的jQuery oLoader插件的使用方法,希望大家能够喜欢。

猜你在找的jQuery相关文章