source-media-query-loader
v0.2.0 source media query media queries image lazyload lazy load loader
source-media-query-loader
Load image according to media queries and source nodes
Install
npm i source-media-query-loader
API
QueryLoader(cb)
Create instance with the callback
The callback receive an object with 8 properties
Argument | Value |
---|---|
src | the image source |
width | the image naturalWidth |
height | the image naturalHeight |
media | the media query |
img | the image node |
x | the x focus point ratio, default to .5 |
y | the y focus point ratio, default to .5 |
attributes | an object with the original attributes values |
var ql = QueryLoader(function(data) {
// {src:"image.jpg", width:320, height:240, media:"(max-width: 700px)", img:img, x:.5, y:.5, attributes:object}
console.log(data)
})
ql.start()
add(data)
Add a source to the QueryLoader
Argument data
can be a dom node
or a javascript object
Format | Value |
---|---|
node | <source src="image.jpg" media="(width <= 700px)"/> |
object | {src:"image.jpg", media:"(width <= 700px)"} |
The properties src
and media
are required
find(node)
Add all <source>
child of node
<div id="ref">
<source src="small.jpg" x="0.663774403" y="0.375375375" hd="small-hd.jpg" media="(width <= 700px)"/>
<source src="medium.jpg" x=".363" y=".484257871" media="(900px >= width > 700px)" />
<source src="large.jpg" media="(width > 900px)" />
</div>
ql.find(document.querySelector('#ref'))
start([node], [offset])
Start the instance
If node
is defined, starts the lazy loading mode. The image will be loaded if node
will enter the viewport
The argument offset
is only used in lazy mode. The argument is optional, default to 200
stop()
Stop the instance. The callback will no more be invoked
kill()
Kill the instance. Listeners and memory are cleared
License
MIT
npm i source-media-query-loader
Metadata
- MIT
- Whatever
- Unknown
- released 5/25/2016