我们使用jQuery的ajax在页面中就像使用iframe一样加载其他页面内容，今天我给大家分享一个名叫jQuery oLoader的插件，该插件还集成了oPageLoader，可以轻松实现加载图片和页面的漂亮效果。
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加载页面： |
|
当然，它还提供了丰富的选项和回调函数，根据具体需求进行设置。
| 代码如下 | 复制代码 |
| { 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 } }); |
|
时间： 2024-10-03 19:10:35