Edit Lazy-Loaded Image

Name

Also known as (comma separated)

Brief definition Image loaded only as it approaches the viewport.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "loading", "type": "select", "label": "Loading", "default": "lazy", "options": [ "lazy", "eager" ] }, { "id": "fadeIn", "type": "toggle", "label": "Fade in on load", "default": true }, { "id": "width", "type": "number", "label": "Width", "default": 320, "min": 160, "max": 480, "step": 10 }, { "id": "caption", "type": "text", "label": "Caption", "default": "Harbour at dusk" } ]

Templates (JSON object keyed by format) { "html": "<figure class=\"lli\" style=\"width:{{width}}px;\">\n <img class=\"lli__img {{#if fadeIn}}lli__img--fade{{/if}}\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Crect width='320' height='200' fill='%23BFD9F2'/%3E%3Ccircle cx='240' cy='60' r='28' fill='%23E8A020'/%3E%3Cpath d='M0 160 L80 100 L160 150 L240 90 L320 140 L320 200 L0 200 Z' fill='%23A8E6C1'/%3E%3C/svg%3E\" alt=\"{{caption}}\" loading=\"{{loading}}\" width=\"{{width}}\" height=\"200\" />\n <figcaption class=\"lli__caption\">{{caption}}</figcaption>\n</figure>\n<style>\n.lli { max-width: 100%; font: 13px/1.4 system-ui, sans-serif; color: #241430; }\n.lli__img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 200; border-radius: 8px; background: #24143010; }\n@keyframes lli-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }\n@media (prefers-reduced-motion: no-preference) {\n .lli__img--fade { animation: lli-fade-in 200ms ease-out; }\n}\n.lli__caption { margin: 8px 2px 0; color: #24143099; }\n</style>", "tailwind": "<figure class=\"lli-tw font-sans text-[13px] text-[#241430]\" style=\"width:{{width}}px;max-width:100%;\">\n <img class=\"block w-full h-auto rounded-lg bg-[#24143010] {{#if fadeIn}}lli-tw__img--fade{{/if}}\" style=\"aspect-ratio:320/200;\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Crect width='320' height='200' fill='%23BFD9F2'/%3E%3Ccircle cx='240' cy='60' r='28' fill='%23E8A020'/%3E%3Cpath d='M0 160 L80 100 L160 150 L240 90 L320 140 L320 200 L0 200 Z' fill='%23A8E6C1'/%3E%3C/svg%3E\" alt=\"{{caption}}\" loading=\"{{loading}}\" width=\"{{width}}\" height=\"200\" />\n <figcaption class=\"mt-2 mx-0.5 text-[#241430]/60\">{{caption}}</figcaption>\n</figure>\n<style>\n@keyframes lli-tw-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }\n@media (prefers-reduced-motion: no-preference) {\n .lli-tw__img--fade { animation: lli-tw-fade-in 200ms ease-out; }\n}\n</style>", "react": "export function LazyLoadedImage({\n loading = \"{{loading}}\",\n fadeIn = {{fadeIn}},\n width = {{width}},\n caption = \"{{caption}}\",\n}) {\n return (\n <figure style={{ width, maxWidth: \"100%\", font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\" }}>\n <img\n src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Crect width='320' height='200' fill='%23BFD9F2'/%3E%3Ccircle cx='240' cy='60' r='28' fill='%23E8A020'/%3E%3Cpath d='M0 160 L80 100 L160 150 L240 90 L320 140 L320 200 L0 200 Z' fill='%23A8E6C1'/%3E%3C/svg%3E\"\n alt={caption}\n loading={loading}\n width={width}\n height={200}\n className={fadeIn ? \"lli-react__img lli-react__img--fade\" : \"lli-react__img\"}\n style={{ display: \"block\", width: \"100%\", height: \"auto\", aspectRatio: \"320 / 200\", borderRadius: 8,\n background: \"#24143010\" }}\n />\n <figcaption style={{ margin: \"8px 2px 0\", color: \"#24143099\" }}>{caption}</figcaption>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .lli-react__img--fade { transition: opacity 200ms ease; }\n }\n `}</style>\n </figure>\n );\n}" }