jQuery实现Loading
1 目的：使用jQuery实现的处理结果出现前的加载效果
2 目录结构：
3 images中的两张图片：
(1)loading.gif
(2)loading-bars.gif
4代码展示：
(1)showLoading.html内容如下：
<!DOCTYPE HTML>
<!-- lang: html -->
<html>
<!-- lang: html -->
<head>
<!-- lang: html -->
<title>jQuery showLoading example</title>
<!-- lang: html -->
<meta charset="utf-8">
<!-- lang: html -->
<link href="showLoading.css" rel="stylesheet" media="screen" />
<!-- lang: html -->
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<!-- lang: html -->
<script type="text/javascript" src="jquery.showLoading.js"></script>
<!-- lang: html -->
<style>
<!-- lang: html -->
a{
<!-- lang: html -->
color:blue;
<!-- lang: html -->
cursor:pointer;
<!-- lang: html -->
text-decoration:underline;
<!-- lang: html -->
}
<!-- lang: html -->
<!-- lang: html -->
div.instructions_container{
<!-- lang: html -->
float:left;
<!-- lang: html -->
width:350px;
<!-- lang: html -->
margin-right:50px;
<!-- lang: html -->
}
<!-- lang: html -->
<!-- lang: html -->
div#activity_pane{
<!-- lang: html -->
float:left;
<!-- lang: html -->
width:350px;
<!-- lang: html -->
height:200px;
<!-- lang: html -->
border:1px solid #CCCCCC;
<!-- lang: html -->
background-color:#EEEEEE;
<!-- lang: html -->
padding-top:200px;
<!-- lang: html -->
text-align:center;
<!-- lang: html -->
}
<!-- lang: html -->
<!-- lang: html -->
div.exmple_links .link_category{
<!-- lang: html -->
margin-bottom:15px;
<!-- lang: html -->
}
<!-- lang: html -->
<!-- lang: html -->
.loading-indicator-bars{
<!-- lang: html -->
background-image:url('images/loading-bars.gif');
<!-- lang: html -->
width:150px;
<!-- lang: html -->
}
<!-- lang: html -->
</style>
<!-- lang: html -->
<script type="text/javascript">
<!-- lang: html -->
jQuery(document).ready(function(){
<!-- lang: html -->
//
<!-- lang: html -->
// When a user clicks the 'loading-default' link,
<!-- lang: html -->
// call showLoading on the activity pane
<!-- lang: html -->
// with default options
<!-- lang: html -->
//
<!-- lang: html -->
jQuery('a.loading-default').click(function(){
<!-- lang: html -->
jQuery('#activity_pane').showLoading();
<!-- lang: html -->
});
<!-- lang: html -->
<!-- lang: html -->
//
<!-- lang: html -->
// When a user clicks the 'loading-ajax' link,
<!-- lang: html -->
// call showLoading,sleep,then call hide loading
<!-- lang: html -->
// with default options
<!-- lang: html -->
//
<!-- lang: html -->
jQuery('a.loading-ajax').click(function(){
<!-- lang: html -->
jQuery('#activity_pane').showLoading({
<!-- lang: html -->
'afterShow':
<!-- lang: html -->
function(){
<!-- lang: html -->
setTimeout("jQuery('#activity_pane').hideLoading()",1000);
<!-- lang: html -->
}
<!-- lang: html -->
});
<!-- lang: html -->
});
<!-- lang: html -->
<!-- lang: html -->
//
<!-- lang: html -->
// When a user clicks the 'loading-bars' link,
<!-- lang: html -->
// call showLoading with addClass specified
<!-- lang: html -->
//
<!-- lang: html -->
jQuery('a.loading-bars').click(function(){
<!-- lang: html -->
<!-- lang: html -->
jQuery('#activity_pane').showLoading(
<!-- lang: html -->
{
<!-- lang: html -->
'addClass':'loading-indicator-bars'
<!-- lang: html -->
}
<!-- lang: html -->
);
<!-- lang: html -->
<!-- lang: html -->
});
<!-- lang: html -->
<!-- lang: html -->
//
<!-- lang: html -->
// When a user clicks the 'loading-bars' link,
<!-- lang: html -->
//call hideLoading on the activity pane
<!-- lang: html -->
//
<!-- lang: html -->
jQuery('a.loading-hide').click(function(){
<!-- lang: html -->
jQuery('#activity_pane').hideLoading();
<!-- lang: html -->
});
<!-- lang: html -->
<!-- lang: html -->
});
<!-- lang: html -->
</script>
<!-- lang: html -->
</head>
<!-- lang: html -->
<body>
<!-- lang: html -->
<div class="instructions_container">
<!-- lang: html -->
<div class="example_links">
<!-- lang: html -->
<!-- lang: html -->
<div class="link_category">
<!-- lang: html -->
<div class="link">
<!-- lang: html -->
<a class="loading-default">Show default loading indicator</a>
<!-- lang: html -->
</div>
<!-- lang: html -->
<div class="link">
<!-- lang: html -->
<a class="loading-hide">Hide default loading indicator</a>
<!-- lang: html -->
</div>
<!-- lang: html -->
</div>
<!-- lang: html -->
<!-- lang: html -->
<div class="link_category">
<!-- lang: html -->
<div class="link">
<!-- lang: html -->
<a class="loading-ajax">simulate 1-second Ajax load</a>
<!-- lang: html -->
</div>
<!-- lang: html -->
</div>
<!-- lang: html -->
<!-- lang: html -->
<div class="link_category">
<!-- lang: html -->
<div class="link">
<!-- lang: html -->
<a class="loading-bars">show 'bars'-style loading indicator</a>
<!-- lang: html -->
</div>
<!-- lang: html -->
<div class="link">
<!-- lang: html -->
<a class="loading-hide">Hide 'bars'-style loading indicator</a>
<!-- lang: html -->
</div>
<!-- lang: html -->
<!-- lang: html -->
</div>
<!-- lang: html -->
<!-- lang: html -->
</div>
<!-- lang: html -->
<!-- lang: html -->
<div class="usage">
<!-- lang: html -->
Usage with jQuery load method:
<!-- lang: html -->
<pre>
<!-- lang: html -->
jQuey('#activity_pane').showLoading();
<!-- lang: html -->
jQuery('#activity_pane').load(
<!-- lang: html -->
'/path/to/my/url',
<!-- lang: html -->
{},
<!-- lang: html -->
function(){
<!-- lang: html -->
//
<!-- lang: html -->
// this is the ajax callback
<!-- lang: html -->
//
<!-- lang: html -->
jQuery('#activity_pane').hideLoading();
<!-- lang: html -->
});
<!-- lang: html -->
</pre>
<!-- lang: html -->
</div>
<!-- lang: html -->
</div>
<!-- lang: html -->
<!-- lang: html -->
<div id="activity_pane">
<!-- lang: html -->
Here is where we will load something via ajax.
<!-- lang: html -->
<br/>
<!-- lang: html -->
This container <b>must</b> have an id attribute
<!-- lang: html -->
</div>
<!-- lang: html -->
<!-- lang: html -->
<div style="clear:both;"></div>
<!-- lang: html -->
</body>
<!-- lang: html -->
</html>
(2)showLoading.css内容展示：
.loading-indicator{
<!-- lang: css -->
height:80px;
<!-- lang: css -->
width:80px;
<!-- lang: css -->
background:url('images/loading.gif');
<!-- lang: css -->
background-repeat: no-repeat;
<!-- lang: css -->
background-position:center center;
<!-- lang: css -->
}
<!-- lang: css -->
<!-- lang: css -->
.loading-indicator-overlay{
<!-- lang: css -->
background-color:#FFFFFF;
<!-- lang: css -->
opacity:0.6;
<!-- lang: css -->
filter:alpha(opacity = 60);
<!-- lang: css -->
}
(3)jquery.showLoading.js
<!-- lang: js -->
/*
<!-- lang: js -->
* jQuery showLoading plugin v1.0
<!-- lang: js -->
*
<!-- lang: js -->
* Copyright (c) 2009 Jim Keller
<!-- lang: js -->
* Context - http://www.contextllc.com
<!-- lang: js -->
*
<!-- lang: js -->
* Dual licensed under the MIT and GPL licenses.
<!-- lang: js -->
*
<!-- lang: js -->
*/
<!-- lang: js -->
<!-- lang: js -->
jQuery.fn.showLoading = function(options) {
<!-- lang: js -->
<!-- lang: js -->
var indicatorID;
<!-- lang: js -->
var settings = {
<!-- lang: js -->
'addClass': '',
<!-- lang: js -->
'beforeShow': '',
<!-- lang: js -->
'afterShow': '',
<!-- lang: js -->
'hPos': 'center',
<!-- lang: js -->
'vPos': 'center',
<!-- lang: js -->
'indicatorZIndex' : 5001,
<!-- lang: js -->
'overlayZIndex': 5000,
<!-- lang: js -->
'parent': '',
<!-- lang: js -->
'marginTop': 0,
<!-- lang: js -->
'marginLeft': 0,
<!-- lang: js -->
'overlayWidth': null,
<!-- lang: js -->
'overlayHeight': null
<!-- lang: js -->
};
<!-- lang: js -->
<!-- lang: js -->
jQuery.extend(settings, options);
<!-- lang: js -->
<!-- lang: js -->
var loadingDiv = jQuery('<div></div>');
<!-- lang: js -->
var overlayDiv = jQuery('<div></div>');
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Set up ID and classes
<!-- lang: js -->
//
<!-- lang: js -->
if ( settings.indicatorID ) {
<!-- lang: js -->
indicatorID = settings.indicatorID;
<!-- lang: js -->
}
<!-- lang: js -->
else {
<!-- lang: js -->
indicatorID = jQuery(this).attr('id');
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
jQuery(loadingDiv).attr('id', 'loading-indicator-' + indicatorID );
<!-- lang: js -->
jQuery(loadingDiv).addClass('loading-indicator');
<!-- lang: js -->
<!-- lang: js -->
if ( settings.addClass ){
<!-- lang: js -->
jQuery(loadingDiv).addClass(settings.addClass);
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Create the overlay
<!-- lang: js -->
//
<!-- lang: js -->
jQuery(overlayDiv).css('display', 'none');
<!-- lang: js -->
<!-- lang: js -->
// Append to body, otherwise position() doesn't work on Webkit-based browsers
<!-- lang: js -->
jQuery(document.body).append(overlayDiv);
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Set overlay classes
<!-- lang: js -->
//
<!-- lang: js -->
jQuery(overlayDiv).attr('id', 'loading-indicator-' + indicatorID + '-overlay');
<!-- lang: js -->
<!-- lang: js -->
jQuery(overlayDiv).addClass('loading-indicator-overlay');
<!-- lang: js -->
<!-- lang: js -->
if ( settings.addClass ){
<!-- lang: js -->
jQuery(overlayDiv).addClass(settings.addClass + '-overlay');
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Set overlay position
<!-- lang: js -->
//
<!-- lang: js -->
<!-- lang: js -->
var overlay_width;
<!-- lang: js -->
var overlay_height;
<!-- lang: js -->
<!-- lang: js -->
var border_top_width = jQuery(this).css('border-top-width');
<!-- lang: js -->
var border_left_width = jQuery(this).css('border-left-width');
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// IE will return values like 'medium' as the default border,
<!-- lang: js -->
// but we need a number
<!-- lang: js -->
//
<!-- lang: js -->
border_top_width = isNaN(parseInt(border_top_width)) ? 0 : border_top_width;
<!-- lang: js -->
border_left_width = isNaN(parseInt(border_left_width)) ? 0 : border_left_width;
<!-- lang: js -->
<!-- lang: js -->
var overlay_left_pos = jQuery(this).offset().left + parseInt(border_left_width);
<!-- lang: js -->
var overlay_top_pos = jQuery(this).offset().top + parseInt(border_top_width);
<!-- lang: js -->
<!-- lang: js -->
if ( settings.overlayWidth !== null ) {
<!-- lang: js -->
overlay_width = settings.overlayWidth;
<!-- lang: js -->
}
<!-- lang: js -->
else {
<!-- lang: js -->
overlay_width = parseInt(jQuery(this).width()) + parseInt(jQuery(this).css('padding-right')) + parseInt(jQuery(this).css('padding-left'));
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
if ( settings.overlayHeight !== null ) {
<!-- lang: js -->
overlay_height = settings.overlayWidth;
<!-- lang: js -->
}
<!-- lang: js -->
else {
<!-- lang: js -->
overlay_height = parseInt(jQuery(this).height()) + parseInt(jQuery(this).css('padding-top')) + parseInt(jQuery(this).css('padding-bottom'));
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
jQuery(overlayDiv).css('width', overlay_width.toString() + 'px');
<!-- lang: js -->
jQuery(overlayDiv).css('height', overlay_height.toString() + 'px');
<!-- lang: js -->
<!-- lang: js -->
jQuery(overlayDiv).css('left', overlay_left_pos.toString() + 'px');
<!-- lang: js -->
jQuery(overlayDiv).css('position', 'absolute');
<!-- lang: js -->
<!-- lang: js -->
jQuery(overlayDiv).css('top', overlay_top_pos.toString() + 'px' );
<!-- lang: js -->
jQuery(overlayDiv).css('z-index', settings.overlayZIndex);
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Set any custom overlay CSS
<!-- lang: js -->
//
<!-- lang: js -->
if ( settings.overlayCSS ) {
<!-- lang: js -->
jQuery(overlayDiv).css ( settings.overlayCSS );
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// We have to append the element to the body first
<!-- lang: js -->
// or .width() won't work in Webkit-based browsers (e.g. Chrome, Safari)
<!-- lang: js -->
//
<!-- lang: js -->
jQuery(loadingDiv).css('display', 'none');
<!-- lang: js -->
jQuery(document.body).append(loadingDiv);
<!-- lang: js -->
<!-- lang: js -->
jQuery(loadingDiv).css('position', 'absolute');
<!-- lang: js -->
jQuery(loadingDiv).css('z-index', settings.indicatorZIndex);
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Set top margin
<!-- lang: js -->
//
<!-- lang: js -->
<!-- lang: js -->
var indicatorTop = overlay_top_pos;
<!-- lang: js -->
<!-- lang: js -->
if ( settings.marginTop ) {
<!-- lang: js -->
indicatorTop += parseInt(settings.marginTop);
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
var indicatorLeft = overlay_left_pos;
<!-- lang: js -->
<!-- lang: js -->
if ( settings.marginLeft ) {
<!-- lang: js -->
indicatorLeft += parseInt(settings.marginTop);
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// set horizontal position
<!-- lang: js -->
//
<!-- lang: js -->
if ( settings.hPos.toString().toLowerCase() == 'center' ) {
<!-- lang: js -->
jQuery(loadingDiv).css('left', (indicatorLeft + ((jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width())) / 2)).toString() + 'px');
<!-- lang: js -->
}
<!-- lang: js -->
else if ( settings.hPos.toString().toLowerCase() == 'left' ) {
<!-- lang: js -->
jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(jQuery(overlayDiv).css('margin-left'))).toString() + 'px');
<!-- lang: js -->
}
<!-- lang: js -->
else if ( settings.hPos.toString().toLowerCase() == 'right' ) {
<!-- lang: js -->
jQuery(loadingDiv).css('left', (indicatorLeft + (jQuery(overlayDiv).width() - parseInt(jQuery(loadingDiv).width()))).toString() + 'px');
<!-- lang: js -->
}
<!-- lang: js -->
else {
<!-- lang: js -->
jQuery(loadingDiv).css('left', (indicatorLeft + parseInt(settings.hPos)).toString() + 'px');
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// set vertical position
<!-- lang: js -->
//
<!-- lang: js -->
if ( settings.vPos.toString().toLowerCase() == 'center' ) {
<!-- lang: js -->
jQuery(loadingDiv).css('top', (indicatorTop + ((jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height())) / 2)).toString() + 'px');
<!-- lang: js -->
}
<!-- lang: js -->
else if ( settings.vPos.toString().toLowerCase() == 'top' ) {
<!-- lang: js -->
jQuery(loadingDiv).css('top', indicatorTop.toString() + 'px');
<!-- lang: js -->
}
<!-- lang: js -->
else if ( settings.vPos.toString().toLowerCase() == 'bottom' ) {
<!-- lang: js -->
jQuery(loadingDiv).css('top', (indicatorTop + (jQuery(overlayDiv).height() - parseInt(jQuery(loadingDiv).height()))).toString() + 'px');
<!-- lang: js -->
}
<!-- lang: js -->
else {
<!-- lang: js -->
jQuery(loadingDiv).css('top', (indicatorTop + parseInt(settings.vPos)).toString() + 'px' );
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Set any custom css for loading indicator
<!-- lang: js -->
//
<!-- lang: js -->
if ( settings.css ) {
<!-- lang: js -->
jQuery(loadingDiv).css ( settings.css );
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Set up callback options
<!-- lang: js -->
//
<!-- lang: js -->
var callback_options =
<!-- lang: js -->
{
<!-- lang: js -->
'overlay': overlayDiv,
<!-- lang: js -->
'indicator': loadingDiv,
<!-- lang: js -->
'element': this
<!-- lang: js -->
};
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// beforeShow callback
<!-- lang: js -->
//
<!-- lang: js -->
if ( typeof(settings.beforeShow) == 'function' ) {
<!-- lang: js -->
settings.beforeShow( callback_options );
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Show the overlay
<!-- lang: js -->
//
<!-- lang: js -->
jQuery(overlayDiv).show();
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// Show the loading indicator
<!-- lang: js -->
//
<!-- lang: js -->
jQuery(loadingDiv).show();
<!-- lang: js -->
<!-- lang: js -->
//
<!-- lang: js -->
// afterShow callback
<!-- lang: js -->
//
<!-- lang: js -->
if ( typeof(settings.afterShow) == 'function' ) {
<!-- lang: js -->
settings.afterShow( callback_options );
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
return this;
<!-- lang: js -->
};
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
jQuery.fn.hideLoading = function(options) {
<!-- lang: js -->
<!-- lang: js -->
<!-- lang: js -->
var settings = {};
<!-- lang: js -->
<!-- lang: js -->
jQuery.extend(settings, options);
<!-- lang: js -->
<!-- lang: js -->
if ( settings.indicatorID ) {
<!-- lang: js -->
indicatorID = settings.indicatorID;
<!-- lang: js -->
}
<!-- lang: js -->
else {
<!-- lang: js -->
indicatorID = jQuery(this).attr('id');
<!-- lang: js -->
}
<!-- lang: js -->
<!-- lang: js -->
jQuery(document.body).find('#loading-indicator-' + indicatorID ).remove();
<!-- lang: js -->
jQuery(document.body).find('#loading-indicator-' + indicatorID + '-overlay' ).remove();
<!-- lang: js -->
<!-- lang: js -->
return this;
<!-- lang: js -->
};