Ajax Loader 1.0

Created Thursday 25th of September 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)

Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.

What it Does

Use this plug-in when you want to inform your visitors that a certain part of your page is currently loading. The plug-in adds a faded 'loading-div' on top of the selected element(s). The div is of course completely stylable.

How to Use

jQuery('#contact').ajaxLoader(); would add the overlay on top of the #contact-element.

When you want to remove the loader simply run jQuery('#contact').ajaxLoaderRemove();

Example

I should start loading after a couple of seconds, then load for a couple more and then stop loading only to start again after a couple of seconds. And so on.

Example Code

HTML

<div id="jquery-ajax-loader-example">
I should start loading after a couple of secondsthen load for a couple more and then stop loading only to start again after a couple of seconds. And so on.
</
div>

JS

setInterval(function () {
    
jQuery('#jquery-ajax-loader-example').ajaxLoader();
    
setTimeout(function () {
        
jQuery('#jquery-ajax-loader-example').ajaxLoaderRemove();
    }, 
2000);
}, 
4000);

Source Code

jQuery.fn.ajaxLoader = function (conf) {
    var 
config jQuery.extend({
        
className:        'jquery-ajax-loader'
        
fadeDuration:    500
    
}, conf);

    return 
this.each(function () {
        var 
jQuery(this);

        if (!
this.ajaxLoaderObject) {
            var 
offset t.offset();
            var 
dim = {
                
left:    offset.left
                
top:    offset.top
                
width:    t.outerWidth(), 
                
height:    t.outerHeight()
            };

            
this.ajaxLoaderObject jQuery('<div class="' config.className '"></div>').css({
                
position:    'absolute'
                
left:        dim.left 'px'
                
top:        dim.top 'px',
                
width:        dim.width 'px',
                
height:        dim.height 'px'
            
}).appendTo(document.body).hide();
        }

        
this.ajaxLoaderObject.fadeIn(config.fadeDuration);
    });
};

jQuery.fn.ajaxLoaderRemove = function () {
    return 
this.each(function () {
        if (
this.ajaxLoaderObject) {
            
this.ajaxLoaderObject.fadeOut(500);
        }
    });
};

Download

Plug-in

Requires

Random jQuery Plug-ins

  • Togglable DL

    Use this plug-in on your definition-lists (dl-elements) to allow the dd:s for a dt to be toggled when clicking the dt. Don't use it unless it's semant...

    Details

  • Equal Height

    This plug-in makes HTML-elements equal height by adjusting their min-height CSS properties. Of course IE6 has no clue what min-height means so the plu...

    Details

  • Content Scroller

    Use this plug-in to make a list of elements only show one at a time and every now and then scroll to the next one. The plug-in scrolls in infinty, sta...

    Details

More Plug-ins

Recent Comments

  1. Andreas on "SleekPHP User Handling"

    Thank you for showing interest :) Were the docs en...

  2. ciptard on "SleekPHP User Handling"

    Ok, thank you

  3. Andreas on "SleekPHP User Handling"

    I might write a "getting started" article for Slee...

Page cached. Loaded in: 0.0095 second(s).
Last DB change: 2012-02-04 08:04:40
Last file change: 2011-10-03 07:42:35
Cache created: 2012-02-04 12:21:33