lazysizes
Version:
High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).
84 lines (68 loc) • 1.96 kB
Markdown
# lazysizes custommedia extension
lazySizes custommedia extension allows you to automatically sync and manage your breakpoints between your CSS and the ``media`` attributes of your ``"picture > source"`` elements using the ``customMedia`` option of lazySizes.
## Configuration via CSS
The following CSS...
```css
html:after {
display: none;
content: '--small: (max-width: 500px) | --medium: (max-width: 1100px) | --large: (max-width: 1500px)';
}
```
... allows you to write the following markup:
```html
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source
data-srcset="http://placehold.it/500x600/11e87f/fff"
media="--small" />
<source
data-srcset="http://placehold.it/700x300"
media="--medium" />
<source
data-srcset="http://placehold.it/1400x600/e8117f/fff"
media="--large" />
<!--[if IE 9]></video><![endif]-->
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
class="lazyload"
data-srcset="http://placehold.it/1800x900/117fe8/fff"
alt="image with artdirection" />
</picture>
```
The parsed custom media query object can be accessed through the ``lazySizesConfig.customMedia`` option object:
```js
window.lazySizesConfig.customMedia; // returns:
/*
{
'--small': '(max-width: 500px)',
'--medium': (min-width: 1100px)',
'--large': '(max-width: 1100px)'
}
*/
```
```scss
/*
Simple Sass mixin to share a map of breakpoints between CSS and JS
Usage:
$breakpoints: (
--small: (max-width: 480px),
--medium: (max-width: 1024px),
--large: (min-width: 1280px)
);
html:after {
@include shareBreakpoints($breakpoints);
}
*/
shareBreakpoints($map , $cssprop: content){
$description: '';
$property, $value in $map
{
$description != '' {
$description: $description + ' | ';
}
$description: $description + $property +': '+ inspect($value);
}
display: none;
#{$cssprop}: $description;
}
```