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:

Load page 1 Load page 2 Load page 3

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:

Show preload images Show other preload images Hide preload images (Enable) Disable content Load content

Show with fade preload images Hide with fade preload images Load content with fade

Load content with fade IN and OUT

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)