mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Added documentation for lazy-loading images
This commit is contained in:
parent
3bd153f4b6
commit
fe9cfb52c7
@ -29,7 +29,7 @@ markdown_extensions:
|
|||||||
|
|
||||||
### Image alignment
|
### Image alignment
|
||||||
|
|
||||||
When the [Attribute List][2] extension is enabled, images can be aligned by
|
When the [Attribute List][3] extension is enabled, images can be aligned by
|
||||||
adding the respective alignment directions via the `align` attribute, i.e.
|
adding the respective alignment directions via the `align` attribute, i.e.
|
||||||
`align=left` or `align=right`
|
`align=left` or `align=right`
|
||||||
|
|
||||||
@ -68,6 +68,8 @@ adding the respective alignment directions via the `align` attribute, i.e.
|
|||||||
_If there's insufficient space to render the text next to the image, the image
|
_If there's insufficient space to render the text next to the image, the image
|
||||||
will stretch to the full width of the viewport, e.g. on mobile viewports._
|
will stretch to the full width of the viewport, e.g. on mobile viewports._
|
||||||
|
|
||||||
|
[3]: #attribute-list
|
||||||
|
|
||||||
### Image captions
|
### Image captions
|
||||||
|
|
||||||
Sadly, the Markdown syntax doesn't provide native support for image captions,
|
Sadly, the Markdown syntax doesn't provide native support for image captions,
|
||||||
@ -87,3 +89,24 @@ _Result_:
|
|||||||
<img src="https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–" width="300" />
|
<img src="https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–" width="300" />
|
||||||
<figcaption>Image caption</figcaption>
|
<figcaption>Image caption</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
|
|
||||||
|
### Image lazy-loading
|
||||||
|
|
||||||
|
Modern browsers provide [native support for lazy-loading images][4] through the
|
||||||
|
`loading` attribute, which degrades to eager-loading in browsers without
|
||||||
|
support. As with [image alignment][5], if the [Attribute List][3] extension is
|
||||||
|
enabled, images can be lazy-loaded by adding `loading=lazy`.
|
||||||
|
|
||||||
|
_Example_:
|
||||||
|
|
||||||
|
``` markdown
|
||||||
|
![Placeholder](https://dummyimage.com/600x400/eee/aaa){: loading=lazy }
|
||||||
|
```
|
||||||
|
|
||||||
|
_Result_:
|
||||||
|
|
||||||
|
![Placeholder](https://dummyimage.com/600x400/f5f5f5/aaaaaa&text=–%20Image%20–){: loading=lazy width=300 }
|
||||||
|
|
||||||
|
[4]: https://caniuse.com/#feat=loading-lazy-attr
|
||||||
|
[5]: #image-alignment
|
||||||
|
Loading…
Reference in New Issue
Block a user