source-media-query-loader v0.2.0

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

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

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