knowledge/img lazy loading in html.md

# img lazy loading in html

To implement [[Lazy Loading]] to an `<img ... >` tag, add the attrbitue `loading=lazy`

    <img loading=lazy ... >

This will load the image when scrolling is near the viewport, using the [Intersection Observer API](https://developers.google.com/web/updates/2016/04/intersectionobserver)

## Further reading

- <https://web.dev/native-lazy-loading>

## What led to learning this

- Accidentally: a rabbit hole that started at [Jason Crawford's github](https://github.com/jasoncrawford) and ended at <https://github.com/owid/owid-grapher/pull/422>
new: img lazy loading in html 2020-07-27 23:25:24 +02:00			`# img lazy loading in html`

			To implement [[Lazy Loading]] to an `<img ... >` tag, add the attrbitue `loading=lazy`

			`<img loading=lazy ... >`

			`This will load the image when scrolling is near the viewport, using the [Intersection Observer API](https://developers.google.com/web/updates/2016/04/intersectionobserver)`

			`## Further reading`

			`- <https://web.dev/native-lazy-loading>`

`Why learned this` -> `What led to learning this` 2020-07-29 00:42:47 +02:00			`## What led to learning this`
new: img lazy loading in html 2020-07-27 23:25:24 +02:00
			`- Accidentally: a rabbit hole that started at [Jason Crawford's github](https://github.com/jasoncrawford) and ended at <https://github.com/owid/owid-grapher/pull/422>`