elephpant on rails

Javascript lazy loading with dependencies

Here it is, yet another javascript lazy loader. Sadly, none of existing ones has been solving my problem and I was even using great $script.js for some time, but eventually written new one.

Why?

• extremely lightweight (less than 0.5KB gzipped)
• lazy (on-demand) loading
• support for google.load out of the box
• any code (not only loaders) can be executed 

Link: https://github.com/sobstel/scru.js.

Sample usage:

// Adding to queue:

$scru.queue('google:jsapi', $scru.fn.async_load('http://www.google.com/jsapi'));
$scru.queue('google:visualization', $scru.fn.google_load('visualization', '1', {packages:['corechart']}), ['google:jsapi']);

// Somewhere in some script (called only when needed)

$scru.execute(drawChart, ['google:visualization']);

All jsapi, visualization js are loaded only when “execute” is called.

JavaScript inspect/dump made easy

Was ever looking for JavaScript equivalent of PHP’s var_dump() or Ruby’s inspect (or p or pp or y or… etc)?

Forget it! You have it by your hand available in Chrome developer tools and Firefox’s firebug. Just type it into console and you get beautifuly browseable dump.

Chrome:

Firefox:

Checking if variable exists

Recently I’ve learned that the best way to check if variable really exists in JavaScript is to call if (typeof somevar !== "undefined"). It seems to be most reliable as typeof always returns string and non-existing var is always “undefined”. Be aware that even if you declare variable with var somevar; it’s still undefined as it has no value assigned during declaration.

jQuery onload event for images

When you want to perform some action when images finish to load, you may be surprised sometimes as onload event is not called when image is already cached. To make it work for all images you simply need also to check this.complete and this.readyState.