Sha256: 0a3d4bf232a32e108dad6cdde39f75a307c5fec313cb7bc93f9fe68199f2d18e
Contents?: true
Size: 1.27 KB
Versions: 8
Compression:
Stored size: 1.27 KB
Contents
---
sort: 2
---
# Javascript Friendly
These are analogous to their plain HTML counterparts, but instead of `src`,
`srcset`, and `sizes`, you get `data-src`, `data-srcset`, and `data-sizes`. This
allows you to use javascript for things like [lazy
loading](https://github.com/verlok/lazyload).
- `data_picture`
```html
<picture>
<source data-srcset="..." data-sizes="...">
<source data-srcset="..." data-sizes="...">
(...)
<img data-src="...">
</picture>
```
- `data_img`
```html
<img data-srcset="..." data-src="..." data-sizes="...">
```
- `data_auto` - `data_picture` when needed, otherwise `data_img`.
## Special Options
The following preset settings only apply to these output formats.
- `noscript`
_Format:_ `noscript: true|false`
_Default:_ `false`
Include a basic `img` fallback within a `<noscript>` tag, giving your
non-javascript-running users something to look at.
```html
<img data-srcset="..." data-src="..." data-sizes="...">
<noscript>
<img src="..." alt="...">
</noscript>
```
- `data_sizes`
_Format:_ `data_sizes: true|false`
_Default:_ `true`
This option sets whether you would like JPT's auto-generated sizes to be returned as a
`data-sizes` attribute or a normal `sizes` attribute.
Version data entries
8 entries across 8 versions & 1 rubygems