Lazy – The on-demand jQuery plugin loader
This Jquery plugin is an on-demand plugin loader, also known as a lazy loader. Instead of downloading all Jquery-plugins, you might or might not need, when the page loads. Lazy downloads the plugins when you actually use them.
This Jquery plugin is an on-demand Jquery plugin loader, also known as a lazy loader. Instead of downloading all Jquery-plugins, you might or might not need, when the page loads. Lazy downloads the plugins when you actually use them. Lazy is very lightweight, super fast, and smart. Lazy will keep track of all your plugins and dependencies and make sure that they are only downloaded once.
How to use Lazy
$.lazy({
src: 'jquery.elastic.js',
name: 'elastic'
});
// And then you use you plugins as you always do
$('textarea').elastic();
How to work with dependencies
$.lazy({
src: 'ui.draggable.js',
name: 'draggable',
dependencies: {
js: ['ui.core.js'],
css: ['ui.draggable.css']
}
});
// And then you use you plugins as you always do
$("#draggable").draggable();
This will load ui.draggable.css and ui.core.js before it loads ui.draggable.js and applies it on the element draggable.
Enable or disable caching
$.lazy({
src: 'ui.draggable.js',
name: 'draggable',
dependencies: {
js: ['ui.core.js'],
css: ['ui.draggable.css']
},
cache: true
});
Caching is disabled by default, but you can enable it by setting the variable cache to true.
| Version | Changes |
|---|---|
| 1.5 | Refactored. (Thanks Kristofer Karlsson) |
| 1.3.1 | Critical bug fix for argument leakage. |
| 1.3 | Faster, better and stronger. Added cache control and a new API |
| 1.2.2 | Fixed a bug where Lazy would load the same plugin more than once. |
| 1.2 | Added support for jquery’s chainability |
| 1.1 | Added support for css and javascript dependencies |
Comments
Make a comment
Projects
- Accordion (jQuery)
- Airport (jQuery)
- Defaultvalue (jQuery)
- Elastic (jQuery)
- Highlight (jQuery)
- Keycan
- Lazy (jQuery)
- Limit (jQuery)
- Password Strength (jQuery)
- Show Password (jQuery)
- Tabify (jQuery)
- Valid8 (jQuery)
Latest posts
- July 8th, 2009 Why are we typing passwords twice?
- July 5th, 2009 Don’t stop password masking; let the user decide
- June 1st, 2009 You can’t validate email addresses with regular expressions
- May 20th, 2009 Konami Code: Why so verbose, when you can make it in 140 characters?
- May 18th, 2009 Let your users know if Firebug slows down your web page.
[...] Tage schon bin ich über ein schönes kleines jQuery-Plugin names Lazy gestolpert. Bei lazy handelt es sich um ein nur 530byte großes Plugin das gerade bei großen [...]
Hmm, if we tie this to a php js combiner, compressor, that would make this even more beneficial.
This is an amazing solution for enterprise applications that uses a lot of plug-ins in it’s page, to replace it all once in the header, and make the lazy javascript handle the rest for it!
Really great one.
Here’s a CSS compressor I did a while backago:
$val)
{
$css .= str_replace(‘; ‘,’;',str_replace(‘ }’,'}’,str_replace(‘{ ‘,’{‘,str_replace(array(“\r\n”,”\r”,”\n”,”\t”,’ ‘,’ ‘,’ ‘),”",preg_replace(‘!/\*[^*]*\*+([^/][^*]*\*+)*/!’,”,file_get_contents($key.’.css’))))));
}
// Send a content type header and the content.
header(‘Content-type: text/css’);
echo $css;
// Flush to the browser.
ob_end_flush();
You would use it in the file like this:
$date))
{
$date = date(‘YmdHis’, filemtime($val.’.css’));
}
}
return implode(‘&’,$styles).’.’.$date.’.php.css’;
}
?>
<link rel=”stylesheet” type=”text/css” href=”" />
Just would have to modify it to us js instead.
http://www.moxieforge.net/overview.php?project_id=18&category_id=6 <– could modify that for the JS part.
[...] up is Lazy, a on-demand plugin loader for jQuery. I have to be honest, two months ago I would have thought [...]
I agree with everyone. A potent addition by EllisGL and Kudos @Amr for putting it so simply and succinctly.
The proxy method would better return ‘this’ to keep jQuery’s chanability.
eg.
$(‘#xxx’).elastic().bgiframe()….
You absolutely right. It has been added to version 1.2
[...] In: JQuery plugins 7 Jun 2009 Go to Source [...]
I like this plugin, great idea. I think it would be beneficial to allow js caching as an option though using…
$.ajaxSetup({ cache: true });Just uploaded version 1.3 which, thanks to you, have built-in cache control.
[...] jQuery – Lazy – The on-demand jQuery plugin loader – Jan Jarfalk (Suggested by Elijah Manor) [...]
[...] Lazy – The on-demand jQuery plugin loader "This Jquery plugin is an on-demand plugin loader, also known as a lazy loader. Instead of downloading all Jquery-plugins, you might or might not need, when the page loads. Lazy downloads the plugins when you actually use them." (tags: web_development jquery javascript plugins) [...]
[...] jQuery – Lazy – The on-demand jQuery plugin loader – Jan Jarfalk (Suggested by Elijah Manor) [...]
Do you think it might be possible to add a “callback” property so that we can launch a JS function when the .js is loaded?
That is definitely possible. I was in need of one my self just a few days ago. I might take a look at it in a few days.
Hi, I just tried out and it worked great but when I moved the code to an external JS, it doesn’t seem to any more. Any one else have this issue?
make sure that the external js is loaded after jQuery
Very good your plugin.
I am registering two methods of an external plugin and displays the following error message on the console (firebug):
my code:
—-
$.lazy({src: ‘webfile?type=js&file=jquery.autocomplete.js’, name: ‘autocomplete’, dependencies: {css: ['webfile?type=css&file=jquery.autocomplete.css']}, cache: true});
$.lazy({src: ‘webfile?type=js&file=jquery.autocomplete.js’, name: ‘result’, dependencies: {css: ['webfile?type=css&file=jquery.autocomplete.css']}, cache: true});
—-
the error in console:
(jquery.lazy-1.3.1.source.js) Line 87: object[queItem.name] is undefined
—-
Thanks
Friend, I again :)
I noticed that the plugin does not work properly in IE 6 and 8 in the first time. It features an error (I was not too hard because I have no tools for such analysis) i have to refresh the page to function normally. Even in the case of site that happens. ;)
Looks like it’s not working properly with jGrowl..
$(document).ready(function(){ $.lazy({ src: '/js/jgrowl/jquery.jgrowl_compressed.js', name: 'jGrowl', dependencies: { css: ['/js/jgrowl/jquery.jgrowl.css'] } }); $.jGrowl("foo", {"header":"Message:"}); $.jGrowl("bar", {"header":"Message:"}); $.jGrowl("bar", {"header":"Message:"}); $.jGrowl("bar", {"header":"Message:"}); });Works if you call the method once, so it runs, then wait a sec to make sure it’s loaded:
var dostuff = function() {
$.jGrowl(“foo”, {“header”:”Message:”});
$.jGrowl(“bar”, {“header”:”Message:”});
$.jGrowl(“bar”, {“header”:”Message:”});
$.jGrowl(“bar”, {“header”:”Message:”});
}
$(document).ready(function(){
$.lazy({
src: ‘/js/jgrowl/jquery.jgrowl_compressed.js’,
name: ‘jGrowl’,
dependencies: {
css: ['/js/jgrowl/jquery.jgrowl.css']
}
});
$.jGrowl(“foobar”, {“header”:”Message:”});
setTimeout(“dostuff()”,1000);
dostuff();
});
A class for simple load and cache -> http://weaponw.com/artigo,5,carregar-javascript-dinamicamente
Why didn’t you used classic callbacks like this :
$.lazy(src: ‘dependencies/ui.draggable.js’, function(){
// use draggable
});
?
Is there a reason ?
I think it make your code heavier for nothing, and difficult to understand
Also beginners could be tricked by the demos you provide… They could think that their programs will “wait” when they do $.lazy …
Would it be possible to show a progress indicator? Bigger trees and some ajax requests takes a time to happen, so the user would appreciate some feedback.
I’ve faced some problems with Flexigrid that holds different methods in the same file.
Forget about my last comment. I’ve mixed up some things I should say to different people. The only thing to consider is the flexigrid thing, a plugin that contains different methods on the same file, and it seems that lazy cannot handle it.
I’m having trouble getting this plugin to work with the jQuery UI files, and I can’t see where I’m going wrong? My code is this:
$.lazy({
src: ‘assets/javascript/jquery-ui-1.7.2/ui/minified/effects.core.min.js’,
name: ‘effect’,
dependencies: {
js: ['/assets/javascript/jquery-ui-1.7.2/ui/minified/effects.pulsate.min.js']
},
cache: true
});
$.lazy({
src: ‘/assets/javascript/jquery.localscroll-1.2.7-min.js’,
name: ‘localScroll’,
dependencies: {
js: ['/assets/javascript/jquery.scrollTo-1.4.2-min.js']
},
cache: true
});
/* Function to highlite a target after the anchor has been clicked */
function targetHighlight(target) {
var target_id = $(target).attr(“id”); // get the id of the target element
if(target_id != ‘content_main’) { // don’t apply the highlight to this list of targets
$(target).effect(“pulsate”, { times: 1 }, 500);
}
}
// TEST: if we have an internal page anchor use the scroller plugins to get smooth animation.
if($(“a[href*=#]“).length > 0) {
$.localScroll({
axis:’xy’, // ‘x’, ‘y’, ‘xy’ or ‘yx’
onAfter: targetHighlight,
offset: {top:-20, left:-20}
});
}
The localScroll works fine, and triggers properly – but the pulsate effect I expect to fire doesn’t happen. I’m guessing that the call to effect() is what’s going wrong, but I can’t figure out how to properly apply it?
http://eduardo.pacheco.kanema.com.br/plugin-jquery-load-js-css/
Loader is a jQuery plugin for dynamic loading of JavaScript’s, CSS’s and images. The current version is compatible with any modern browser, and some less so (IE6). Is in release candidate 1. Testing, use and comment!
Very cool plugin, Thanks!
Does not work using Safari it seems.
I have a script tag inside the body element calling one of my plugins. It never seems to get called.
I believe you could make the plugin options syntax a little cleaner if you could simply pass in an array of objects representing your plugins. I quickly mocked up some code which should handle such a task while still maintaining your current functionality.
The end result would be having the end user only make one call to $.lazy() to register all plugins as opposed to making numerous calls.
View the source on this jsbin page:
http://jsbin.com/asotu3
I wanted to use $.lazy plugin in one of my projects, but the example didn’t worked in Google Chrome browser. Do you know why? Are there any ways to fix it?
it won’t work in Chrome, because of it’s security-features.
Chrome does’nt allow access on local files via ajax-get etc.
1. you could either put it on a web-server
or
2. call yout Chrome-browser with the command-line parameter “–allow-file-access-from-files”