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