0.2.0 • Published 6 years ago
monoimage v0.2.0
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="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'
false
: (default), img elementtrue
: div element,background-image
,background-size:cover
'contain'
: div element,background-image
,background-size:contain
onload
: undefined
|function'
undefined
: (default)function
: argument is element
inline
: false|true
false
: (default),display:block
true
:display:inline-block
fill
: false|true
false
: (default), aspect ratio preserved usingpadding-top
true
:height:100%
monoimage
applies classes for load state. useful for fade-in.
<!-- loading -->
<img class="monoimage">
<!-- loaded -->
<img class="monoimage monoimage-loaded">
Todo
- Loaded callback
- Continue exploring
element
option (#5) - Asserts
- Pixel Ratio option
- Better docs