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 --> <!-- custom selector --> <!-- custom selector and attribute --> <!-- passed element, custom selector -->
// relative to the above examples let imageToLoad = document