Coder Social home page Coder Social logo

l.js's Introduction

l.js is another simple/tiny javascript/css loader

features

  • parallel script / css loading
  • callback after script loading (css support callback too but are executed imediately)
  • tiny only 2.1ko uglifyed, less than 1ko gziped (at least for latest revision)
  • may load in order to preserve dependencies
  • support aliases for simpler calling
  • on demand loading
  • only one script tag required
  • clear syntax
  • successive load of same file will load it once but execute all callbacks associated
  • can dumbly check already inserted tags at load time
  • may use a fallback url on error (only for js files and with error events compatible browsers)

examples

loading ljs and another libs with one single tag

<script src="l.js">
	ljs.load('myLib.js',function(){ /* your callback here */});
</script>

loading some scripts in parallel others in order

<script src="l.js">
	ljs
		.load('myLib.js')
		.load('myRequiredLib.js','myDependentLib.js',function(){ /* your callback here */})
	;
</script>

second load will be executed in parallel of first load but myDependentLib.js won't load before myRequireLib.js is loaded

<script src="l.js">
	ljs.load(['myLib.js','myRequiredLib.js'],'myDependentLib.js',function(){ /* your callback here */});
</script>

this will load myLib.js and myRequiredLib.js in parrallel and wait for them before loading myDependentLib.js

using some aliases for simpler loading

<script src="l.js?checkLoaded"> // <- adding checkLoaded to the url will dumbly check already inserted script/link tags
	ljs
		.addAliases({
			jQuery:'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js#jqueryId' // <- script tag will have attribute id=jqueryId
			ui:[
				'jQuery'
				,'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'
				,'myUITheme.css'
			]
		})
		.load('ui',function(){
			/* work with both jquery and jquery-ui here */
		})
	;
</script>

define a fallback url

l.js also support a fallback url for javascript files in case you want to try to get the resource from another location on loading failure You can define this fallback url parameter like you define ids. The difference is you will prefix with #= instead of # alone

<script src="l.js">
	ljs.load('http://domain.com/myLib.js#=/myfallback.js#myid',function(){
		/*
			generated script tag will have myid as id and will try to load /myfallback.js if it fail to load http://domain.com/myLib.js
		*/
	});
</script>

this piece of code is dual licensed under MIT / GPL Hope this help, code review, suggestions, bug reports are welcome and appreciated.

l.js's People

Contributors

malko avatar ivanrey avatar juanfran avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.