loading
Draw the doodle only once it comes near the viewport.
Syntax
- <css-doodle loading="lazy"></css-doodle>
- lazy
-
The first draw waits until the doodle is within one screen of the viewport, as
loading="lazy"does for an<img>. Without the attribute every doodle on the page draws at load.
Until it draws, the doodle is a block, so a width and height from the
page's CSS hold its place; give it one, or doodles further down collapse to the top and all draw at once.
update() draws it right away.
A doodle with cells ignores the attribute.
Examples
A long page of doodles, each drawn as it scrolls into view:
<style>
css-doodle { width: 280px; height: 280px; }
</style>
<css-doodle loading="lazy">
@grid: 8 / 280px;
background: @p(#f5c636, #1a1614);
</css-doodle>