Lazy loading

Fetches list thumbnails only as they scroll into view.

The Listen page: the library, the demo's four albums as drawn record covers — Each cover in the grid is a lazy-loaded image; those below the fold wait for a scroll.

How Riff uses it

Every thumbnail in a list is marked loading="lazy": the art on each track row, each item in Up next, and each record cover in the library grid. The cover of the current track is not lazy, and neither are the first row of covers on Home and the cover at the head of an album, which the page is painted around; the first of them is fetched before anything else.

Why

A post or library can have dozens of covers, and the browser should not fetch them all before the listener scrolls.

Without it

A browser without the attribute loads the images eagerly.

Where

plugins/riff/assets/player/helpers.js, line 165

? `<img src="${ esc( art ) }" alt="" loading="lazy" decoding="async">`

plugins/riff/features/listen/class-ui.php, line 198
```
$load = ' loading="lazy"';
```

Links open the source at the commit this page was published from.

Specification: HTML Standard. Reference: Lazy loading on MDN.