StringLazy

StringLazy is an image module. It activates on <img> elements, reads the real image URL from string-lazy, waits until the object is in view, and then swaps in the final source.

Public API

Attributes

Attribute	Target	Default	Real runtime effect
`string="lazy"`	`<img>`	required	Activates the module for that image object.
`string-lazy`	`<img>`	required	Real image source used when the object becomes active.

StringLazy only works on <img>. A <div string="lazy"> will be ignored by the runtime.

CSS Variables and DOM Output

StringLazy writes:

a placeholder src when the image starts without one
inline aspect-ratio once dimensions are known
class lazyLoad when state is initialized
class -aspect-ready when dimensions are known
class -loaded after the final image has loaded
img.loading = "lazy" and img.decoding = "async"

If a blob URL is used internally, the module also clears srcset and sizes before swapping the source.

StringLazy does not expose public CSS variables.

Events

Channel	Payload	Fired when
`image:load:all`	`null`	All currently pending lazy images have finished loading

TypeScript

stringTune.on('image:load:all', () => {
  console.log('All lazy images are ready');
});

Mirror Behavior

This module has no mirror output contract.

Quick Example

HTML

<div class="lazy-spacer">Scroll down</div>

<img
  string="lazy"
  string-lazy="/images/home/string-scroll.jpg"
  alt="String Scroll"
  class="lazy-image"
/>

<div class="lazy-status" id="lazy-status">Waiting</div>

CSS

.lazy-spacer {
  height: 70vh;
  display: grid;
  place-items: center;
}

.lazy-image {
  display: block;
  width: min(100%, 520px);
  margin: 0 auto;
  border: 1px solid black;
  background: white;
  opacity: 0.2;
}

.lazy-image.-aspect-ready {
  opacity: 0.5;
}

.lazy-image.-loaded {
  opacity: 1;
}

.lazy-status {
  min-height: 32px;
  display: grid;
  place-items: center;
  margin-top: 12px;
}

Registration

TypeScript

import StringTune, { StringLazy } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringLazy);
stringTune.start(60);

Detailed Behavior

The real source comes from string-lazy, not from src.
The module listens to the internal object in-view lifecycle before activating the image.
Aspect ratio is resolved before the image is activated whenever dimensions can be detected.
If the fetch path fails, the module falls back to assigning the original source directly.