After quite a while without updates, I’ve finally released version 2.0.0 of LazyLoad.
LazyLoad is a tiny (only 1,541 bytes minified), dependency-free JavaScript library that makes it super easy to load external JavaScript and (new in this version) CSS files on demand. It’s ideal for quickly and unobtrusively loading large external scripts and stylesheets either lazily after the rest of the page has finished loading or on demand as needed.
In addition to CSS support, this version of LazyLoad also adds support for parallel loading of multiple resources in browsers that support it. To load multiple resources in parallel, simply pass an array of URLs in a single LazyLoad call.
Downloads
- lazyload.js (full source)
- lazyload-min.js (minified source)
- Archive: tgz | zip
Usage
Using LazyLoad is simple. Just call the appropriate method — css() to load CSS, js() to load JavaScript — and pass in a URL or array of URLs to load. You can also provide a callback function if you’d like to be notified when the resources have finished loading, as well as an argument to pass to the callback and a scope in which to execute the callback.
// Load a single JavaScript file and execute a callback when it finishes loading.
LazyLoad.js('http://example.com/foo.js', function () {
alert('foo.js has been loaded');
});
// Load multiple JS files and execute a callback when they've all finished.
LazyLoad.js(['foo.js', 'bar.js', 'baz.js'], function () {
alert('all files have been loaded');
});
// Load a CSS file and pass an argument to the callback function.
LazyLoad.css('foo.css', function (arg) {
alert(arg);
}, 'foo.css has been loaded');
// Load a CSS file and execute the callback in a different scope.
LazyLoad.css('foo.css', function () {
alert(this.foo); // displays 'bar'
}, null, {foo: 'bar'});
Supported Browsers
- Firefox 2+
- Google Chrome (all versions)
- Internet Explorer 6+
- Opera 9+
- Safari 3+
- Mobile Safari (all versions)
Other browsers may work, but haven’t been tested. It’s a safe bet that anything based on a recent version of Gecko or WebKit will probably work.
Caveats
All browsers support parallel loading of CSS. However, only Firefox and Opera currently support parallel script loading while preserving execution order. To ensure that scripts are always executed in the correct order, LazyLoad will load all scripts sequentially in browsers other than Firefox and Opera. Hopefully other browsers will improve their parallel script loading behavior soon.
Sadly, Firefox, Safari, and Google Chrome don’t provide any indication when a CSS file has finished loading. In these browsers, CSS load callbacks will execute after a short delay, but there’s no way to automatically guarantee that the CSS has finished loading before the callback is executed. Luckily, there’s a fairly painless manual workaround that you can use to detect when CSS has finished loading, but it’s not possible for LazyLoad to do it for you.
Comments
About the CSS loading issue
I assume that the problem is more in knowing that the browser finished to receive the CSS file, and less in the time it takes the browser to actually parse and process it, right?
So in cases where the CSS file is on the same server (which I hope/expect is the common case), and when callback on load is needed, why not use something like XMLHttpRequest to get the content and append it to the page?
The main downside I see is that the page will have the content, instead of a link element referring to the CSS file. But it will allow to know exactly when the loading is finished. I’m not sure it’s a bad tradeoff, at least as an option. For most (though admittedly not all) users the main concern is to get the CSS, not to get a nice link element.
Re: About the CSS loading issue
Yep, this would be a reasonable workaround. However, CSS residing on the same server is much less of a common case than you might expect these days, since CDN usage is becoming more and more widespread.
When I considered the tradeoffs involved in adding a bunch of code to LazyLoad to implement workarounds for the CSS loading issue, I decided it just wasn’t worth it. Needing to know exactly when CSS has finished loading is actually not a very common use case (in my experience, at least), and since there are several reasonably simple manual workarounds, I decided it wasn’t worth adding significant weight to LazyLoad.
I may revisit this decision in the future, though.
Re: About the CSS loading issue
You’re right. I can see how it’s not worth the investment for you right now. I was mostly wondering if there was also a technical or theoretical problem, and you’re right that usage of CDNs does reduce the utility of this.
Thanks for the response and details.
Load Once?
I assume this still loads the items just once even if it is repeated?
Re: Load Once?
LazyLoad doesn’t do any checking to try to determine whether something has already been loaded. If you tell LazyLoad to load something, LazyLoad will tell the browser to load it.
The previous version of LazyLoad did have a
loadOnce()method, but it was suboptimal and I removed it in 2.0. I may implement a replacement in a future version, though.CSS展示问题
我想知道，如果CSS文件
Load Once
This would be a nice feature to have. I looked at your original loadOnce() method, and while it wasn’t perfect, it didn’t seem “that” bad.
Great resource
This is a great resource! I’m using it in one of my projects to dynamically load wordlists. It has operated flawlessly. Thank you for your great work.
YSlow and Page Speed
I know it is not a performance tweak for lazy loading after the page has been loaded but YSlow and Page Speed expect CSS in the head section and JS at the end of the body section.
Is there any chance of appending JS to the body instead of the head?
Re: YSlow and Page Speed
In this case, YSlow and Page Speed just aren’t smart enough to realize that the JS was loaded lazily. There’s no performance difference between injecting lazy-loaded script nodes into the head vs. the body.
Unfortunately, appending script nodes to the body can cause errors in IE, so LazyLoad appends to the head to be safe.
Appending nodes in any browser...
appendChild breaks Chrome 5, FF 3 and IE 8 if it’s done immediately after readyState == ‘complete’
On each browser the whole document gets replaced.