Lazysrc

About

The browser decides when images load. Markup that already has a real src or srcset is never stripped, so it works without JavaScript; Lazysrc only adds loading="lazy" and decoding="async" when they are missing. Sources held in data attributes, on the image or on the <source> elements of its <picture>, are copied onto the elements as soon as the image mounts. Without JavaScript those images stay empty, so follow them with a <noscript> copy that has real sources, such as <noscript><img src="harbour.jpg" alt="Harbour at dawn"></noscript>. Background images have no native lazy loading, so they load through an IntersectionObserver shortly before they scroll into view.

Failed loads are retried with a growing delay. Don't lazy load the largest image above the fold: give it a plain src and fetchpriority="high" instead.

Usage

Register the component and the framework loads it the first time a page contains [data-lazysrc]:not([data-lazysrc-complete]).

import { Parallelogram } from '@parallelogram-js/core';

const app = Parallelogram.create();
app.components.add('[data-lazysrc]:not([data-lazysrc-complete])', () => import('@parallelogram-js/core/components/Lazysrc'));
app.run();

The framework is optional. Lazysrc.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:

import Lazysrc from '@parallelogram-js/core/components/Lazysrc';

Lazysrc.enhanceAll();

It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.

Its styles come from the package stylesheet:

@import '@parallelogram-js/core/styles/lazysrc.css';