夏日博客

A-A+

基于jQuery插件的加载图片与页面特效代码

2016年01月08日 前端设计 暂无评论 阅读 6 views 次

加载图片与页面的功能可以利用js来做但写起来复杂了，下文小编整理了一个基于jQuery插件的加载图片与页面特效代码了，这段代码不但简单并且非常的实用同时兼容性也非常的好。

我们使用jQuery的ajax在页面中就像使用iframe一样加载其他页面内容，今天我给大家分享一个名叫jQuery oLoader的插件，该插件还集成了oPageLoader，可以轻松实现加载图片和页面的漂亮效果。

基于jQuery插件的加载图片与页面特效代码

oLoader使用方法

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

调用jQuery oLoader非常简单，一句话如下：

$('#element').oLoader();

使用oLoader加载图片：

  1. $(function(){   
  2.   $('img').oLoader({   
  3.     waitLoad: true,   
  4.     fadeLevel: 0.9,   
  5.     backgroundColor: '#fff',   
  6.     style:0,   
  7.     image: 'loader.gif'   
  8.   });   
  9. });  

使用oLoader加载页面：

  1. $('#ajax').oLoader({   
  2.   url: 'test.html',   
  3.   updateOnComplete: false   
  4. });  

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

  1. {   
  2.   image: 'images/loader.gif',  //加载动画图片   
  3.   style: 1, //loader样式   
  4.   modal: true, //模态遮罩，如果为false，则不会显示遮罩层   
  5.   fadeInTime: 300, //遮罩层淡入速度，毫秒   
  6.   fadeOutTime: 300, //遮罩层谈出速度，毫秒   
  7.   fadeLevel: 0.7, //遮罩层透明度，0-1   
  8.   backgroundColor: '#000', //背景色   
  9.   imageBgColor: '#fff', //loader动画图片背景   
  10.   imagePadding: '10',   
  11.   showOnInit: true, //初始化显示加载动画   
  12.   hideAfter: 0, //time in ms   
  13.   url: false, //Ajax调用参数，下同   
  14.   type: 'GET',   
  15.   data: false,   
  16.   updateContent: true, //是否替换ajax返回内容   
  17.   updateOnComplete: true,//是否立即替换服务器返回的内容   
  18.   showLoader: true, //是否显示loader图片   
  19.   effect: '', //动态效果，支持door,slide,doornslide   
  20.   wholeWindow: false, //when true, oLoader covers the whole window   
  21.   lockOverflow: false, //locks body's overflow while loading   
  22.   waitLoad: false, //当元素内容加载完才显示内容   
  23.   checkIntervalTime: 100, //interval which checks for position changes   
  24.       
  25.   //回调函数   
  26.   complete: '', //当动画结束，内容加载完调用   
  27.   onStart: '', //动画开始时调用   
  28.   onError: '' //当ajax请求出错时调用   
  29. }   
  30. oPageLoader使用方法  
  31. oPageLoader可以实现漂亮的加载页面时的进度条动画，调用oPageLoader也非常简单，如下：  
  32.    
  33. $(function(){   
  34.   $.oPageLoader();   
  35. });   

oPageLoader提供了丰富的选项和方法调用。

  1. {   
  2.   backgroundColor: '#000', //背景色   
  3.   progressBarColor: '#f00', //进度条颜色   
  4.   progressBarHeight: 3, //进度条高度   
  5.   progressBarFadeLevel: 1,    
  6.   showPercentage: true,   
  7.   percentageColor: '#fff',   
  8.   percentageFontSize: '30px',   
  9.   context: 'body',   
  10.   affectedElements: 'img,iframe,frame,script',   
  11.   ownStyle: false, //如果设置为ture，则可自定义进度条样式   
  12.   style: "<div id='ownage_page_loader_text'>0%</div><div id='ownage_page_loader'></div>",   
  13.   lockOverflow: true,   
  14.   images: [], //array of additional images, such as those from css files   
  15.           
  16.   wholeWindow: true,   
  17.   fadeLevel: 1,   
  18.   waitAfterEnd: 0,   
  19.   fadeOutTime: 500,   
  20.       
  21.   //callbacks   
  22.   complete: false, //当页面加载完动画结束时执行   
  23.   completeLoad: false, //当页面已经加载不需要动画结束就执行   
  24.   update: false   
  25. }  

回调函数update，是当页面元素加载完时调用，返回data数据为：

data.total:加载的元素总数。

data.loaded:已加载的元素。

data.percentage:百分比。

使用方法,代码如下:

  1. $.oPageLoader({   
  2.   update: function(data) {   
  3.     //here you can work   
  4.     //with data.percentage   
  5.     //     data.loaded   
  6.     //     data.total             
  7.   }   
  8. });  
标签：

给我留言