search

monoeq / monoimage

Context aware lazy image nanocomponent
MIT License
22 stars 4 forks source link

readme

monoimage

Stability NPM version


work in progress...

Context aware lazy image nanocomponent.

Usage

var MonoImage = require('monoimage')

var imagedata = {
  sizes: {
    500: '/url/or/path/to/image_500.jpg',
    1000: '/url/or/path/to/image_1000.jpg',
    1500: '/url/or/path/to/image_1500.jpg'
  },
  dimensions: {
    ratio: 75
  }
}

var myimage = new MonoImage()
var element = myimage.render(imagedata)

Details

monoimage looks at the dimensions of it's parent to determine which image src to load. Similar to srcset but container aware, rather than viewport aware. Device pixel ratio is considered.

The image is loaded only once the component has entered the viewport, using monolazy.

monoimage accepts image data in an opinionated shape since it is most useful when used with nanopage inside a choo application:

var html = require('choo/html')
var Page = require('nanopage')
var MonoImage = require('monoimage')

function view (state, emit) {
  var p = new Page()
  var image = p().images().first().value()
  return html`
    <div>
      ${state.cache(MonoImage, image.filename).render(image)}
    </div>
  `
}

monoimage by default outputs an image element

var element = myimage.render(imagedata)
<img src="https://github.com/monoeq/monoimage/raw/master/image.jpg" class="monoimage monoimage-loaded" style="width:100%;display:block;">

monoimage has a couple options:

// defaults
var element = myimage.render(imagedata, {
  background: false,
  onload: el => { },
  inline: false,
  fill: false
})

background: false|true|'contain'

onload: undefined|function'

inline: false|true

fill: false|true

monoimage applies classes for load state. useful for fade-in.

<!-- loading -->
<img class="monoimage">

<!-- loaded -->
<img class="monoimage monoimage-loaded">

Todo

See Also