LazyLoad

The mojito-image-lazyload module prepares images for lazy-loading, converting their "src" property to "data-src".

Usage

The add-on currently has but one method: run(data). Pass data through this api before ac.done is called. For example:

data = ac.lazyload.run(data);
ac.done(data);

Only images with a class set to lazyload-candidate will potentially be lazy loaded.

App-level configuration

Configuration is used to easily turn lazy loading on or off:

"lazyload": {
    "enabled": true|false
}

Lazy loading is dependent upon mojito-jscheck, which must be enabled:

"jscheck": {
    "enabled": true
}

If JSCheck is disabled nothing will break, but lazy-loading will not happen. Images will load normally.

Reconstitution

An inline script and a YUI module are provided to reconstitute the img src.

Broken image handling

Sometimes images will be broken. To handle this without disturbing the DOM, the broken image is replaced with a transparent pixel, and a CSS class of "broken" is applied to the image. You can style it however you like. For example:

img.broken {
    background: black url(http://l.yimg.com/pv/static/img/broken-warn-201303041841.png) center center no-repeat;
}