d-lazyimg

d-lazyimg

Lazy load images

Dependencies

Requires derby-stylus to support styles.

Usage

• Create images.assets.js file with datauri images. Use datauri module for it:

  // File must be named *.assets.js
  var datauri = require('datauri');
  
  module.exports = {
  
    // Logo (full versions to be used with dataimg)
    '/img/logo_blue.svg': datauri(
        __dirname + '/../public/img/logo_blue.svg'),
  
    '/img/logo_white.svg': datauri(
        __dirname + '/../public/img/logo_white.svg'),    
  
    // Backgrounds (we specify minified versions to be used with lazyimg)
  
    '/img/cloudy-hills.jpg': datauri(
        __dirname + '/../public/img/cloudy-hills.min.jpg'),
    '/img/bg_strings.jpg': datauri(
        __dirname + '/../public/img/bg_strings.min.jpg'),
  };
  

• Plug in d-lazyimg module and provide datauri assets as an option:

  app.use(require('d-lazyimg'), require('./images.assets'));
  

• Use lazyimg component to do lazy loading of big image:

  <lazyimg img='/img/cloudy-hills.jpg'>
  

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:

  <dataimg img='/img/logo_blue.svg'>