monoimage
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 element -
true
: 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