├── package.json
├── loadJS.js
├── LICENSE
└── README.md


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fg-loadjs",
 3 |   "version": "1.1.0",
 4 |   "description": "A simple function for asynchronously loading JavaScript files",
 5 |   "main": "loadJS.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/filamentgroup/loadJS.git"
12 |   },
13 |   "keywords": [
14 |     "load"
15 |   ],
16 |   "author": "Filament Group <hello@filamentgroup.com>",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/filamentgroup/loadJS/issues"
20 |   },
21 |   "homepage": "https://github.com/filamentgroup/loadJS"
22 | }
23 | 


--------------------------------------------------------------------------------
/loadJS.js:
--------------------------------------------------------------------------------
 1 | /*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */
 2 | (function( w ){
 3 | 	var loadJS = function( src, cb, ordered ){
 4 | 		"use strict";
 5 | 		var tmp;
 6 | 		var ref = w.document.getElementsByTagName( "script" )[ 0 ];
 7 | 		var script = w.document.createElement( "script" );
 8 | 
 9 | 		if (typeof(cb) === 'boolean') {
10 | 			tmp = ordered;
11 | 			ordered = cb;
12 | 			cb = tmp;
13 | 		}
14 | 
15 | 		script.src = src;
16 | 		script.async = !ordered;
17 | 		ref.parentNode.insertBefore( script, ref );
18 | 
19 | 		if (cb && typeof(cb) === "function") {
20 | 			script.onload = cb;
21 | 		}
22 | 		return script;
23 | 	};
24 | 	// commonjs
25 | 	if( typeof module !== "undefined" ){
26 | 		module.exports = loadJS;
27 | 	}
28 | 	else {
29 | 		w.loadJS = loadJS;
30 | 	}
31 | }( typeof global !== "undefined" ? global : this ));
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Filament Group
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | :warning: This project is archived and the repository is no longer maintained. 
  2 | 
  3 | loadJS
  4 | ======
  5 | 
  6 | [![NPM version](http://img.shields.io/npm/v/fg-loadjs.svg)](https://www.npmjs.org/package/fg-loadjs)
  7 | [![Dependency Status](https://david-dm.org/filamentgroup/loadJS.svg)](https://david-dm.org/filamentgroup/loadJS)
  8 | [![devDependency Status](https://david-dm.org/filamentgroup/loadJS/dev-status.svg)](https://david-dm.org/filamentgroup/loadJS#info=devDependencies)
  9 | 
 10 | A simple function for asynchronously loading JavaScript files
 11 | - [c]2014 @scottjehl, Filament Group, Inc.
 12 | - Based on [Surefire Dom Element Insertion](http://www.paulirish.com/2011/surefire-dom-element-insertion/) by Paul Irish
 13 | - Licensed MIT
 14 | 
 15 | ## Usage
 16 | 
 17 | Place the [`loadJS` function](https://github.com/filamentgroup/loadJS/blob/master/loadJS.js) inline in the `head` of your page (it can also be included in an external JavaScript file if preferable).
 18 | 
 19 | Then call it by passing it a JavaScript URL:
 20 | 
 21 | ``` html
 22 | <head>
 23 | ...
 24 | <script>
 25 |   // include loadJS here...
 26 |   function loadJS( src ){ ... }
 27 |   // load a file with loadJS
 28 |   loadJS( "path/to/script.js" );
 29 | </script>
 30 | ...
 31 | </head>
 32 | ```
 33 | 
 34 | You can execute code after the Script has loaded via a callback:
 35 | 
 36 | ``` html
 37 | <head>
 38 | ...
 39 | <script>
 40 |   // include loadJS here...
 41 |   function loadJS( src ){ ... }
 42 |   // load a file with loadJS
 43 |   loadJS( "path/to/script.js", function() {
 44 |     // file has loaded
 45 |   });
 46 | </script>
 47 | ...
 48 | </head>
 49 | ```
 50 | 
 51 | You can ensure ordered execution of multiple asynchronous by passing `true` as the second or third parameter. Only supported in browsers that support the [`async` attribute](http://caniuse.com/#search=async) (No IE8/IE9 support).:
 52 | 
 53 | ```js
 54 | loadJS( "path/to/library.js", true );
 55 | loadJS( "path/to/plugins.js", true );
 56 | loadJS( "path/to/last.js", function() {
 57 | 	//all scripts loaded
 58 | }, true );
 59 | ```
 60 | 
 61 | ## Why not just use `<script src="..." async defer>`?
 62 | 
 63 | The `async` and `defer` attributes enjoy broad browser support. They're great options when all you need to do is load a script for all users, ideally in a non-blocking manner. The limitations with these attributes are: 
 64 | 
 65 | 1. Some older browsers do not support `async` ([though defer has broader support so it's typically not a problem](https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/))
 66 | 2. There's no way to use these attributes to *conditionally* load a script, depending on feature or environmental conditions.
 67 | 3. There is (still) no declarative way to load scripts `async`, but in order. 
 68 | 
 69 | Number 2 above is the main reason we use `loadJS`. Say you want to check if `querySelector` is supported before requesting your entire DOM framework and UI scripting - you'll need to use a script loader to do that. But again, if you just want to load a script unconditionally, these attributes are recommended.
 70 | 
 71 | ## Limitations
 72 | 
 73 | * If placed below external blocking scrips or stylesheets the download starts only after these files are downloaded and parsed. A good workaround for `async` script loading of crucial scripts is to inline `loadJS` before any other stylesheets and scripts and use it either immediately or within a `setTimeout`.
 74 | * Ordered execution does not work in IE9-.
 75 | 
 76 | ```html
 77 | <script>
 78 | 	// include loadJS here...
 79 | 	function loadJS( src ){ ... }
 80 | 	
 81 | 	setTimeout(function(){
 82 | 		loadJS( "path/to/library.js", true );
 83 | 		
 84 | 		if ( !hasFeature ) {
 85 | 			loadJS( "path/to/polyfill.js", true );
 86 | 		}
 87 | 		
 88 | 		loadJS( "path/to/app.js", true );
 89 | 	});
 90 | </script>
 91 | 
 92 | ...
 93 |  
 94 | <link rel="stylesheet" href="path/to/styles.css" />
 95 | ```
 96 | 
 97 | #### Contributions and bug fixes
 98 | 
 99 | Both are very much appreciated - especially bug fixes. As for contributions, the goals of this project are to keep things very simple and utilitarian, so if we don't accept a feature addition, it's not necessarily because it's a bad idea. It just may not meet the goals of the project. Thanks!
100 | 


--------------------------------------------------------------------------------