php中页面图片预先加载图片,jQuery插件实现的加载图片和页面效果

牛智志
2023-12-01

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加载页面:

$('#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, //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:百分比。

使用方法:

$.oPageLoader({

update: function(data) {

//here you can work

//with data.percentage

// data.loaded

// data.total

}

});

具体请看示例3和示例4。

 类似资料: