Riff / Built on the open web / Media

Lazy loading

Fetches list thumbnails only as they scroll into view.

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.

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/riff.js, line 188

  ) }" alt="" loading="lazy" decoding="async">`

• plugins/riff/features/listen/app.js, line 209

  ) }" alt="" loading="lazy" decoding="async">`

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

Reference: Lazy loading on MDN.