Ajaxloader 1.5.1
part of CMS Tata

Ajaxloader jquery plugin for show preload image on dynamic loading content

Ajaxloader plugin for jquery.

* Copyright (c) 2010 Blokhin Yuriy (ds@inbox.ru)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html

Examples 1:



Example 1 code:


  Button1 - $('#localframe').ajaxloader('page1.html');
  Button2 - $('#localframe').ajaxloader('page2.html');
  Button3 - $('#localframe').ajaxloader('load',{load:'page3.html', fadespeed: 'slow', loadcallback: function(){
          $('#localframestatus').html('load-page3 loadcallback');
         },
         readycallback: function(){
          $('#localframestatus').html('load-page3 readycallback');
         }
         }});


Using:


Easy using for show preload image.

Link javascript and stylesheet file:

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

And just call method for some content:

$('#some-content').ajaxloader()

If you need other preload image, you can generated on site http://preloaders.net or others.

Parameters:

  .ajaxloader(mode, options);

   mode:
    'show' - show preload image
     or
    'hide','enable' - hide preload image(enable content)
     or
    'disable' - disable content     'load' - load content with fade by default
   or
   'link to page' - load page in content with fade by default (.ajaxloader('page.html');)

   options:
    'tata-ajax-loader-img' - class of preload image ( .tata-ajax-loader-img { background-image: url('ajax-loader.gif');} )
     or
    options = {
     class : 'tata-ajax-loader-img',   - class of preload image
     fade: false,   - fade enable
     fadespeed: 'fast'   -fade speed
     fadecallback: function(){}   -callback function for load
     load: null - load with fade inout
     loadcallback: null - callback function (load complete)
     opacity: 80 - opacity front preloadimage
    }

Examples 2:







This place some content for reloading
Ajaxloader can work with any tag: p,div e.t.c All content disabled if show preload images

Example 2 code:

<script type="text/javascript"> $(function(){
 $('#some-button').click(function(){
  $('#some-content').ajaxloader();
  $.load('load.html');
 });
 $('#show-button').click(function(){
  $('#some-content').ajaxloader();
 });
 $('#show-other-button').click(function(){
  $('#some-content').ajaxloader('show','tata-ajax-loader-img2');
 });
 $('#hide-button').click(function(){
  $('#some-content').ajaxloader('hide');
 });
 $('#disable-button').click(function(){
  $('#some-content').ajaxloader('disable');
 });
 $('#show-button-fade').click(function(){
  $('#some-content').ajaxloader('show',{fade:true, fadespeed: 'fast'});
 });
 $('#hide-button-fade').click(function(){
  $('#some-content').ajaxloader('hide',{fade:true, fadespeed: 'fast'});
 });
 $('#some-button-fade').click(function(){
  $('#some-content').ajaxloader('show',{
   fade:true,
   fadespeed: 'slow',
   fadecallback: function(){
    $('#some-content').load('load.html');
    }
   }
  );
 });
});
</script>

<button id='show-button'>Show preload images</button>
<button id='hide-button'>Hide preload images</button>
<button id='some-button'>Load content</button>
<button id='disable-button'>Disable</button>


<button id='show-button-fade'>Show with fade preload images</button>
<button id='hide-button-fade'>Hide with fade preload images</button>
<button id='some-button-fade'>Load content with fade</button>

<div id='some-content'>
  This place some content for reloading<br/>
  Ajaxloader can work with any tag: p,div e.t.c
  All content disabled if show preload images
  <button>Button for test</button>
</div>

History log:

1.4 Add option in parameters
1.4 Add minimized file to pack
1.4 Rename class to imageclass parameters
1.4 Fix opacity problem in IE6+
1.4.1 Add simple `disable` without animation
1.4.2 Add option for callback fadein/out function
1.4.2 Add simple example with fade use
1.4.2 Add simple example with fade in out loading content
1.5.0 Add options 'load'
1.5.1 Add event 'readycallback' - call after load (simulate document ready for loaded page)
1.5.1 Add event 'loadcallback'
1.5.1 Tested on IE 9.0.8112.16421 (jQuery 1.7.1)

Downloads:


Download jquery.ajaxloader.1.5.1.js version 1.5.1

Copyright(c) 2011 Blokhin Yuriy (ds@inbox.ru)