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.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)
- Chat
- 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
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 …
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?