blazed
v0.0.1 background images background lazy load lazy srcset responsive
Blazed
Specify image URLs and breakpoints, just like srcset. Blazed will find the size that fits the current viewport and smoothly load the image.
API
blazed([selector][, attribute])
selector
– either a DOM selector compatible with document.querySelectorAll
, or a single DOM node. If you pass an attribute as the selector
param, attribute
will map to your selector
attribute instead. default: [data-src]
attribute
– a data attribute that contains your asset urls and breakpoints. default: data-src
attribute="<imageDefault>[, <imageURL> <imageBreakpoint>] ..."
imageDefault
– this URL is required, and represents the smallest image in the stack. All other images and breakpoints are optional, and represent min-width
based media queries.
Example
<!-- default -->
<div data-src="image-small.jpg, image-medium.jpg 800, image-large.jpg 1100"></div>
<!-- custom selector -->
<div data-bg-src="image-small.jpg"></div>
<!-- custom selector and attribute -->
<div class="js-background" data-bg-src="image-small.jpg"></div>
<!-- passed element, custom selector -->
<div class="js-background" data-bg-src="image-small.jpg, image-medium.jpg 800, image-large.jpg 1100"></div>
// relative to the above examples
blazed()
blazed('[data-bg-src]')
blazed('.js-background', 'data-bg-src')
let imageToLoad = document.querySelector('.js-background')
blazed(imageToLoad, 'data-bg-src')
npm i [email protected]
Metadata
- MIT
- Whatever
- estrattonbailey
- released 6/20/2016