Jquery 等待ajax返回数据loading控件ShowLoading组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery 等待ajax返回数据loading控件ShowLoading组件相关的知识,希望对你有一定的参考价值。

1、意义

     开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此时需要在加载数据中将前台进行提示在加载数据中,利用jquery的遮罩组件可以完成这个功能需求。

2、实现步骤

    (1)、下载 showLoading.css    jquery.showLoading.min.js  两个文件。

    (2)、在jsp中引入这两个文件

<link href="style/showLoading.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.showLoading.min.js"></script>

   (3)、在异步请求中使用这个组件

function showloading(url,data){
  $("body").showLoading();
  $.ajax({
    url:url,
    data:data,
    dataType:"json",
    success:function(obj){
      $("body").hideLoading();
    }
  });
}
----------showLoading.css 代码----------------
a {
color: blue;
cursor:pointer;
text-decoration: underline;
}

div.instructions_container {
float: left;
width: 350px;
margin-right: 50px;

}

div#activity_pane {
float:left;
width: 350px;
height: 200px;
border: 1px solid #CCCCCC;
font-weight:bold;">#EEEEEE;
padding-top: 200px;
text-align: center;

}

div.example_links
.link_category {
margin-bottom: 15px;
}

.loading-indicator-bars {
background-image: url(‘https://raw.githubusercontent.com/riverbed/flyscript-portal/master/thirdparty/showLoading/images/loading-bars.gif‘);
width: 150px;
}

.loading-indicator {
height: 80px;
width: 80px;
background: url( ‘https://raw.githubusercontent.com/riverbed/flyscript-portal/master/thirdparty/showLoading/images/loading.gif‘ );
background-repeat: no-repeat;
background-position: center center;
}

.loading-indicator-overlay {
font-weight:bold;">#FFFFFF;
opacity: 0.6;
filter: alpha(opacity = 60);
}
-------------------jquery.showLoading.js-----------------------------
/*
* jQuery showLoading plugin v1.0
*
* Copyright (c) 2009 Jim Keller
* Context - http://www.contextllc.com
*
* Dual licensed under the MIT and GPL licenses.
*
* Modified by <[email protected]> to support displaying
* percentage complete.
*/

jQuery.fn.setLoading = function(pct) {
var indicatorID = jQuery(this).attr(‘id‘);

$(‘#loading-indicator-‘ + indicatorID).html(pct + ‘%‘);
};

jQuery.fn.showLoading = function(options) {

var indicatorID;
var settings = {
‘addClass‘: ‘‘,
‘beforeShow‘: ‘‘,
‘afterShow‘: ‘‘,
‘hPos‘: ‘center‘,
‘vPos‘: ‘center‘,
‘indicatorZIndex‘ : 5001,
‘overlayZIndex‘: 5000,
‘parent‘: ‘‘,
‘marginTop‘: 0,
‘marginLeft‘: 0,
‘overlayWidth‘: null,
‘overlayHeight‘: null
};

jQuery.extend(settings, options);

var loadingDiv = jQuery(‘<div style="text-align:center"></div>‘);
var overlayDiv = jQuery(‘<div></div>‘);

//
// Set up ID and classes
//
if ( settings.indicatorID ) {
indicatorID = settings.indicatorID;
}
else {
indicatorID = jQuery(this).attr(‘id‘);
}

//jQuery(this).resize(function(e) {
// alert("Change event");
//});

jQuery(loadingDiv).attr(‘id‘, ‘loading-indicator-‘ + indicatorID );
jQuery(loadingDiv).addClass(‘loading-indicator‘);

if ( settings.addClass ){
jQuery(loadingDiv).addClass(settings.addClass);
}

//
// Create the overlay
//
jQuery(overlayDiv).css(‘display‘, ‘none‘);

// Append to body, otherwise position() doesn‘t work on Webkit-based browsers
jQuery(document.body).append(overlayDiv);

//
// Set overlay classes
//
jQuery(overlayDiv).attr(‘id‘, ‘loading-indicator-‘ + indicatorID + ‘-overlay‘);

jQuery(overlayDiv).addClass(‘loading-indicator-overlay‘);

if ( settings.addClass ){
jQuery(overlayDiv).addClass(settings.addClass + ‘-overlay‘);
}

//
// Set overlay position
//

var overlay_width;
var overlay_height;

var border_top_width = jQuery(this).css(‘border-top-width‘);
var border_left_width = jQuery(this).css(‘border-left-width‘);

//
// IE will return values like ‘medium‘ as the default border,
// but we need a number
//
border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width;
border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;

var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);// + $(document.body).css( "border-left" );
var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);

if ( settings.overlayWidth !== null ) {
overlay_width = settings.overlayWidth;
}
else {
overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css(‘padding-right‘)) + parseInt(jQuery(this).css(‘padding-left‘));
}

if ( settings.overlayHeight !== null ) {
overlay_height = settings.overlayWidth;
}
else {
overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css(‘padding-top‘)) + parseInt(jQuery(this).css(‘padding-bottom‘));
}


jQuery(overlayDiv).css(‘width‘, overlay_width.toString() + ‘px‘);
jQuery(overlayDiv).css(‘height‘, overlay_height.toString() + ‘px‘);

jQuery(overlayDiv).css(‘left‘, overlay_left_pos.toString() + ‘px‘);
jQuery(overlayDiv).css(‘position‘, ‘absolute‘);

jQuery(overlayDiv).css(‘top‘, overlay_top_pos.toString() + ‘px‘ );
jQuery(overlayDiv).css(‘z-index‘, settings.overlayZIndex);

//
// Set any custom overlay CSS
//
if ( settings.overlayCSS ) {
jQuery(overlayDiv).css ( settings.overlayCSS );
}


//
// We have to append the element to the body first
// or .width() won‘t work in Webkit-based browsers (e.g. Chrome, Safari)
//
jQuery(loadingDiv).css(‘display‘, ‘none‘);
jQuery(document.body).append(loadingDiv);

jQuery(loadingDiv).css(‘position‘, ‘absolute‘);
jQuery(loadingDiv).css(‘z-index‘, settings.indicatorZIndex);

//
// Set top margin
//

var indicatorTop = overlay_top_pos;

if ( settings.marginTop ) {
indicatorTop += parseInt(settings.marginTop);
}

var indicatorLeft = overlay_left_pos;

if ( settings.marginLeft ) {
indicatorLeft += parseInt(settings.marginTop);
}


//
// set horizontal position
//
if ( settings.hPos.toString().toLowerCase() == ‘center‘ ) {
jQuery(loadingDiv).css(‘left‘, (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString() + ‘px‘);
}
else if ( settings.hPos.toString().toLowerCase() == ‘left‘ ) {
jQuery(loadingDiv).css(‘left‘, (indicatorLeft + parseInt(jQuery(overlayDiv).css(‘margin-left‘))).toString() + ‘px‘);
}
else if ( settings.hPos.toString().toLowerCase() == ‘right‘ ) {
jQuery(loadingDiv).css(‘left‘, (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString() + ‘px‘);
}
else {
jQuery(loadingDiv).css(‘left‘, (indicatorLeft + parseInt(settings.hPos)).toString() + ‘px‘);
}

//
// set vertical position
//
if ( settings.vPos.toString().toLowerCase() == ‘center‘ ) {
jQuery(loadingDiv).css(‘top‘, (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString() + ‘px‘);
}
else if ( settings.vPos.toString().toLowerCase() == ‘top‘ ) {
jQuery(loadingDiv).css(‘top‘, indicatorTop.toString() + ‘px‘);
}
else if ( settings.vPos.toString().toLowerCase() == ‘bottom‘ ) {
jQuery(loadingDiv).css(‘top‘, (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString() + ‘px‘);
}
else {
jQuery(loadingDiv).css(‘top‘, (indicatorTop + parseInt(settings.vPos)).toString() + ‘px‘ );
}




//
// Set any custom css for loading indicator
//
if ( settings.css ) {
jQuery(loadingDiv).css ( settings.css );
}


//
// Set up callback options
//
var callback_options =
{
‘overlay‘: overlayDiv,
‘indicator‘: loadingDiv,
‘element‘: this
};

//
// beforeShow callback
//
if ( typeof(settings.beforeShow) == ‘function‘ ) {
settings.beforeShow( callback_options );
}

//
// Show the overlay
//
jQuery(overlayDiv).show();

//
// Show the loading indicator
//
jQuery(loadingDiv).show();

//
// afterShow callback
//
if ( typeof(settings.afterShow) == ‘function‘ ) {
settings.afterShow( callback_options );
}

return this;
};


jQuery.fn.hideLoading = function(options) {


var settings = {};

jQuery.extend(settings, options);

if ( settings.indicatorID ) {
indicatorID = settings.indicatorID;
}
else {
indicatorID = jQuery(this).attr(‘id‘);
}

jQuery(document.body).find(‘#loading-indicator-‘ + indicatorID ).remove();
jQuery(document.body).find(‘#loading-indicator-‘ + indicatorID + ‘-overlay‘ ).remove();

return this;
};



jQuery(document).ready(
function() {

//
// When a user clicks the ‘loading-default‘ link,
// call showLoading on the activity pane
// with default options
//
jQuery(‘a.loading-default‘).click(

function() {
jQuery(‘#activity_pane‘).showLoading();
}

);


//
// When a user clicks the ‘loading-ajax‘ link,
// call showLoading, sleep, then call hide loading
// with default options
//
jQuery(‘a.loading-ajax‘).click(



function() {


jQuery(‘#activity_pane‘).showLoading(
{
‘afterShow‘:
function() {
setTimeout( "jQuery(‘#activity_pane‘).hideLoading()", 1000 );
}



}
);
}

);


//
// When a user clicks the ‘loading-bars‘ link,
// call showLoading with addClass specified
//
jQuery(‘a.loading-bars‘).click(

function() {
jQuery(‘#activity_pane‘).showLoading(
{
‘addClass‘: ‘loading-indicator-bars‘

}
);
}

);


//
// When a user clicks the ‘loading-hide‘ link,
// call hideLoading on the activity pane
//
jQuery(‘a.loading-hide‘).click(

function() {
jQuery(‘#activity_pane‘).hideLoading();
}

);

}

);
 

以上是关于Jquery 等待ajax返回数据loading控件ShowLoading组件的主要内容,如果未能解决你的问题,请参考以下文章

ajax返回数据之前的loading等待

jQuery移动多页切换页面前等待ajax返回数据

MVC多个jquery.ajax一个接一个的等待

jQuery – AJAX load() 方法

获取 jQuery $.load() ajax 对象

jQuery - AJAX load() 方法