d-lazyimg
Lazy load images
Dependencies
Requires derby-stylus
to support styles.
Usage
-
Create
images.assets.js
file with datauri images. Usedatauri
module for it:// File must be named *.assets.jsvar datauri = ;moduleexports =// Logo (full versions to be used with dataimg)'/img/logo_blue.svg':'/img/logo_white.svg':// Backgrounds (we specify minified versions to be used with lazyimg)'/img/cloudy-hills.jpg':'/img/bg_strings.jpg':; -
Plug in
d-lazyimg
module and provide datauri assets as an option:app; -
Use
lazyimg
component to do lazy loading of big image:
It will instantly load the small image cloudy-hills.min.jpg
you specified in the assets as datauri. Right after that it will start the regular asynchronous loading of the heavy cloudy-hills.jpg
. When full image finish loading it will transparently switch itself with the minified version.
Image caching is not affected - if the full image is already in the browser's cache it won't try to load it the second time the server.
-
Use
dataimg
to embed the full image as datauri: