src/ext-core/src/core/Loader.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.Loader
   9  * @singleton
  10  * Simple class to help load JavaScript files on demand
  11  */
  12 Ext.Loader = Ext.apply({}, {
  13     /**
  14      * Loads a given set of .js files. Calls the callback function when all files have been loaded
  15      * Set preserveOrder to true to ensure non-parallel loading of files if load order is important
  16      * @param {Array} fileList Array of all files to load
  17      * @param {Function} callback Callback to call after all files have been loaded
  18      * @param {Object} scope The scope to call the callback in
  19      * @param {Boolean} preserveOrder True to make files load in serial, one after the other (defaults to false)
  20      */
  21     load: function(fileList, callback, scope, preserveOrder) {
  22         var scope       = scope || this,
  23             head        = document.getElementsByTagName("head")[0],
  24             fragment    = document.createDocumentFragment(),
  25             numFiles    = fileList.length,
  26             loadedFiles = 0,
  27             me          = this;
  28
  29         /**
  30          * Loads a particular file from the fileList by index. This is used when preserving order
  31          */
  32         var loadFileIndex = function(index) {
  33             head.appendChild(
  34                 me.buildScriptTag(fileList[index], onFileLoaded)
  35             );
  36         };
  37
  38         /**
  39          * Callback function which is called after each file has been loaded. This calls the callback
  40          * passed to load once the final file in the fileList has been loaded
  41          */
  42         var onFileLoaded = function() {
  43             loadedFiles ++;
  44
  45             //if this was the last file, call the callback, otherwise load the next file
  46             if (numFiles == loadedFiles && typeof callback == 'function') {
  47                 callback.call(scope);
  48             } else {
  49                 if (preserveOrder === true) {
  50                     loadFileIndex(loadedFiles);
  51                 }
  52             }
  53         };
  54
  55         if (preserveOrder === true) {
  56             loadFileIndex.call(this, 0);
  57         } else {
  58             //load each file (most browsers will do this in parallel)
  59             Ext.each(fileList, function(file, index) {
  60                 fragment.appendChild(
  61                     this.buildScriptTag(file, onFileLoaded)
  62                 );
  63             }, this);
  64
  65             head.appendChild(fragment);
  66         }
  67     },
  68
  69     /**
  70      * @private
  71      * Creates and returns a script tag, but does not place it into the document. If a callback function
  72      * is passed, this is called when the script has been loaded
  73      * @param {String} filename The name of the file to create a script tag for
  74      * @param {Function} callback Optional callback, which is called when the script has been loaded
  75      * @return {Element} The new script ta
  76      */
  77     buildScriptTag: function(filename, callback) {
  78         var script  = document.createElement('script');
  79         script.type = "text/javascript";
  80         script.src  = filename;
  81
  82         //IE has a different way of handling &lt;script&gt; loads, so we need to check for it here
  83         if (script.readyState) {
  84             script.onreadystatechange = function() {
  85                 if (script.readyState == "loaded" || script.readyState == "complete") {
  86                     script.onreadystatechange = null;
  87                     callback();
  88                 }
  89             };
  90         } else {
  91             script.onload = callback;
  92         }
  93
  94         return script;
  95     }
  96 });