我们经常会遇到加载图片和页面的效果,今天我们就介绍oLoader和oPageLoader这两个方法。
演示一:加载图片
$(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 //加载的元素总数
}
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791