Description

This is a small (6 Kb uncompressed) asynchron loader for javascripts, css and images. I have designed this plugin to lazyload a whole UI extension with javascript, images, css files and get a callback when all files are loaded.

I am very glad, that jQuery decided to add this functions to jQuery core (Version 1.4) :)

http://docs.jquery.com/JQuery_1.4_Roadmap

Demo

http://www.ajaxsoft.de/projects/xlazyloader/

Features

load one or multiple files for each type
define timeout (default is 20000 ms)
success, error, complete callbacks for javascript, CSS and images
"each" callback for each file to trace the loading status
prevents double loaded scripts or css files
method to remove scripts/css by using group name
method to disable/enable css files by using group name, so you can use this plugin like a css switcher
Tested in IE6, IE7, FF2/3, Opera 9, Safari 3, Chrome

Dependences

- jquery-1.3.2

Usage

Example 1:

Load some files

$.xLazyLoader({
    js: 'jquery.ui.all.js',
    css: 'ui.allplugins.css',
    img: 'your_image.jpg',
    success: function(){
        alert('All files are loaded');
    }
});

Example 2:

Load multiple files of each type

$.xLazyLoader({
    js: ['ui.core.js','ui.dialog.js'],
    css: ['ui.core.css', 'ui.dialog.css'],
    img: ['your_image.jpg', 'your_image1.jpg', 'your_image2.jpg'],
    name: 'dialog',
    success: function(){
        alert('All files are loaded');
    },
    error: function(){
        alert('Some files were not loaded');
    },
    each: function(url){
        alert('This file was loaded '+url);
    }

});

Example 3:

Remove tags from head (javascript is still working, but css is completely destroyed )

$.xLazyLoader('destroy','dialog');

Example 4:

Disable css.

$.xLazyLoader('disable','dialog');

Enable css.

$.xLazyLoader('enable','dialog');