JS Tutorial
- Overview
- Documents
jQuery Ownage Loader is a plugin for nice loading overlays. This plugin also contains ownage PageLoader extension to create page preloading overlays.
Source: projects.ownage.sk
1. INCLUDE JS FILES
<script src="js/jquery.min.js"></script> <script src="js/jquery.oLoader.min.js"></script>
2. HTML
<table style='width:100%'>
<tr>
<td>
<div id='test-1'>#test-1</div>
<input type='submit' id='show-test-1' value='Show loader' />
<input type='submit' id='hide-test-1' value='Hide loader' />
</td>
<td>
<div id='test-2'>#test-2</div>
<input type='submit' id='show-test-2' value='Show loader' />
<input type='submit' id='hide-test-2' value='Hide loader' />
</td>
</tr>
</table>
3. JAVASCRIPT
$(function(){
// test-1
$('#show-test-1').click(function(){
$('#test-1').oLoader({
backgroundColor:'#f00',
fadeInTime: 500,
fadeOutTime: 1000,
fadeLevel: 0.5
});
});
$('#hide-test-1').click(function(){
$('#test-1').oLoader('hide');
});
}):
4. OPTIONS
jQuery oLoader lets you easily customize all of its components such as loading image, background, complete callback function and much more.
Here are the options you can customize (with the default values):
{
image: 'images/ownageLoader/loader1.gif',
style: 1,
modal: true,
fadeInTime: 300, //time in milliseconds
fadeOutTime: 300,
fadeLevel: 0.7, //overlay opacity (values 0 - 1)
backgroundColor: '#000',
imageBgColor: '#fff', //background under the loader image
imagePadding: '10',
showOnInit: true,
hideAfter: 0, //time in ms
url: false,
type: 'GET',
data: false,
updateContent: true,
updateOnComplete: true,
showLoader: true, //shows the loader image
effect: '',
wholeWindow: false, //when true, oLoader covers the whole window
lockOverflow: false, //locks body's overflow while loading
waitLoad: false, //oLoader will hide after element is loaded (works on imgs, body and iframes)
checkIntervalTime: 100, //interval which checks for position changes
//callback functions
complete: '', //executes on complete
onStart: '', //executes when animation starts
onError: '' //executes when ajax request fails
}
Options above which doesn't have comments next to it are described below:
image
Type: String
This option contains the path of the loading image.
Animated images that come with jQuery oLoader (images/ownageLoader/):
 loader1.gif |
 loader2.gif |
 loader3.gif |
 loader4.gif |
 loader5.gif |
 loader6.gif |
 loader7.gif |
These gifs are generated with ajaxload.info
Note: It is recommended to set this option manually, because the default value for this option is a relative path, so it won't work in other directories except the base dir.
style
Type: Integer (0-4) / String
Sets the look of the loader. Predefined styles in oLoader: 0, 1, 2, 3, 4
If you put a string to this option, it won't show loader image, but will show the content of the style option, so you can create some crazy custom things here.
modal
Type: Boolean - if false, then it doesn't show overlay over the element
backgroundColor
Type: String
Sets the color of the overlay. You can also use image as background since this option is appended to CSS background property.
Using image as background - backgroundColor: 'url(imagePath) no-repeat center'
showOnInit
Type: Boolean - if false, it can be shown afterwards by using - $('#yourElement').oLoader('show');
url, type, data
Type: String
If you wanna do ajax call, then use these 3 options.
url - URL to which the request is sent.
type - The type of request. (GET or POST)
data - Data to be sent to the server.
Note: This may not work on your local machine.
updateContent
Type: Boolean - if false, content of the element is not replaced by ajax response. You can work with the ajax server response in "complete" callback function.
updateOnComplete
Type: Boolean
- true - content is replaced by server response after all animations are done
- false - content is replaced by server response immediately
effect
Type: String
There are 3 experimental effects available:
- "door"
- "slide"
- "doornslide"
5. CALLBACKS
onStart
This function is called when the loader animation starts.
onStart: function() {
//do the magic
}
complete
This function is called after all animations are over
complete: function(successData) {
//do the magic
}
If ajax call was performed, successData contains the server response.
onError
This function is called when AJAX request fails.
onError: function(jqXHR, textStatus, errorThrown) {
//do the magic
}
6. COMMANDS
show
If you intialize oLoader with the option showOnInit set to False, you can use the show command to show it.
Usage:
$('#yourSelector').oLoader('show');
hide
The oLoader can be hidden whenever you want by using this command.
$('#yourSelector').oLoader('hide');
