includeMany is jQuery plugin for including many external JavaScript, CSS and HTML files simultaneously in runtime. This plugin provides callback for each of the files and in addition there is finallyCallback which will be raised after all files are loaded and all callbacks are done.
This extra callback guarantee that every files are loaded and available to use.

By this plugin you can use JavaScript to include other js and css files. You can also load other files such as html or a remote page using an HTTP GET request.

Download includeMany

Current version is 1.2.2
You can get it from here.

includeMany

1. Formats
2. Parameters
3. Examples & Downloads
4. Sample File

Formats

$.include(files,[finalCallback]);
$.chainclude(files,[finalCallback]); ^{available in v.1.2.0 and +}

Parameters

• files

1. A single file such as 'fileurl'
2. List of files such as ['fileurl1','fileurl2',...,'fileurln']
3. Key/value object of files such as {'fileurl1':callback,'fileurl2':callback,...,'fileurl2':callback}

• finalCallback [function] optional

Is a function which will be called after all files are loaded and all callbacks have been called.

Does it support Synchronous loading?

Yes, by using the $.chainclude() you can load js and css files in sequence. read more about it here.

Examples & Downloads

• The simplest format is including one file as below
  

  1. $.include('script1.js');

   

  %24.include%28%27script1.js%27%29%3B
  this will include script1.js
• You can add finallyCallback to the above example so will be called when the script is loaded
  

  1. $.include('script1.js',functionName);

   

  %24.include%28%27script1.js%27%2CfunctionName%29%3B
  this will include script1.js and call functionName. This function can be anything like this:
  

  1. function functionName(){
  2. $.trace('some loading is done!!!');
  3. }

   

  function%20functionName%28%29%7B%0A%20%20%20%20%24.trace%28%27some%20loading%20is%20done%21%21%21%27%29%3B%0A%7D
• You can include multiple files:
  

  1. $.include( ['styles/css2.css','scripts/js2.js'] ,someOptionalFunction);

   

  %24.include%28%20%5B%27styles%2Fcss2.css%27%2C%27scripts%2Fjs2.js%27%5D%20%2CsomeOptionalFunction%29%3B
  You can avoid someOptionalFunction.
• You can define a callback for each includedFile
  

  1. $.include(
  2. {
  3. 'script1.js':function(){ /*something*/ },
  4. 'script2.js':function(){ /*something*/ },
  5. 'somecss.css':null,
  6. 'temp2.html':function(data){alert(data)}
  7. }
  8. );

   

  %24.include%28%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%27script1.js%27%3Afunction%28%29%7B%20%2F%2Asomething%2A%2F%20%7D%2C%0A%20%20%20%20%20%20%20%20%27script2.js%27%3Afunction%28%29%7B%20%2F%2Asomething%2A%2F%20%7D%2C%0A%20%20%20%20%20%20%20%20%27somecss.css%27%3Anull%2C%0A%20%20%20%20%20%20%20%20%27temp2.html%27%3Afunction%28data%29%7Balert%28data%29%7D%0A%20%20%20%20%7D%0A%29%3B
• You can also define a finallyCallback so, after all files are loaded and all callbacks are called, this function will be fired.
  

  1. var globalCallback= function(){
  2. alert('all files are loaded!!!');
  3. }
  4. $.include(
  5. {
  6. 'script1.js':function(){ /*something*/ },
  7. 'script2.js':function(){ /*something*/ },
  8. 'somecss.css':null,
  9. 'temp2.html':function(data){alert(data)}
  10. }
  11. ,globalCallback
  12. );

   

  var%20globalCallback%3D%20function%28%29%7B%0A%20%20%20%20alert%28%27all%20files%20are%20loaded%21%21%21%27%29%3B%0A%7D%0A%24.include%28%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%27script1.js%27%3Afunction%28%29%7B%20%2F%2Asomething%2A%2F%20%7D%2C%0A%20%20%20%20%20%20%20%20%27script2.js%27%3Afunction%28%29%7B%20%2F%2Asomething%2A%2F%20%7D%2C%0A%20%20%20%20%20%20%20%20%27somecss.css%27%3Anull%2C%0A%20%20%20%20%20%20%20%20%27temp2.html%27%3Afunction%28data%29%7Balert%28data%29%7D%0A%20%20%20%20%7D%0A%20%20%20%20%2CglobalCallback%0A%29%3B
  
  atlast is our finallyCallback function.

Sample File

You can download the sample file here.

Tags: includeMany | jQuery | Plugin