Edit Eager Loading

Name

Also known as (comma separated)

Brief definition Load resources immediately.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "resourceCount", "type": "select", "label": "Images on the page", "default": "9", "options": [ "3", "6", "9" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showWarning", "type": "toggle", "label": "Show upfront cost warning", "default": true }, { "id": "bytesEach", "type": "number", "label": "KB per image", "default": 120, "min": 10, "max": 500, "step": 10 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"eag\" data-count=\"{{resourceCount}}\" role=\"img\" aria-label=\"{{resourceCount}} images, all loaded immediately, {{bytesEach}}KB each\">\n <p class=\"eag__title\">All {{resourceCount}} images requested at page load</p>\n <div class=\"eag__grid\">\n <span class=\"eag__img\" style=\"background:{{accent}};\"></span><span class=\"eag__img\" style=\"background:{{accent}};\"></span><span class=\"eag__img\" style=\"background:{{accent}};\"></span>\n <span class=\"eag__img\" style=\"background:{{accent}};\"></span><span class=\"eag__img\" style=\"background:{{accent}};\"></span><span class=\"eag__img\" style=\"background:{{accent}};\"></span>\n <span class=\"eag__img\" style=\"background:{{accent}};\"></span><span class=\"eag__img\" style=\"background:{{accent}};\"></span><span class=\"eag__img\" style=\"background:{{accent}};\"></span>\n </div>\n {{#if showWarning}}<p class=\"eag__note\">Even images far below the fold download now, adding up to a heavier first load.</p>{{/if}}\n</div>\n<style>\n.eag { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.eag__title { margin: 0 0 12px; font-weight: 700; font-size: 12px; }\n.eag__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }\n.eag__img { display: block; height: 34px; border-radius: 6px; }\n.eag[data-count=\"3\"] .eag__img:nth-child(n+4) { display: none; }\n.eag[data-count=\"6\"] .eag__img:nth-child(n+7) { display: none; }\n.eag__note { margin: 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"eagtw eagtw--{{resourceCount}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\" role=\"img\" aria-label=\"{{resourceCount}} images, all loaded immediately, {{bytesEach}}KB each\">\n <p class=\"m-0 mb-3 font-bold text-xs\">All {{resourceCount}} images requested at page load</p>\n <div class=\"grid grid-cols-3 gap-1.5 mb-2.5\">\n <span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span><span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span><span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span>\n <span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span><span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span><span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span>\n <span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span><span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span><span class=\"eagtw__img block h-[34px] rounded-md\" style=\"background:{{accent}};\"></span>\n </div>\n {{#if showWarning}}<p class=\"m-0 text-[10px] text-[#24143099]\">Even images far below the fold download now, adding up to a heavier first load.</p>{{/if}}\n</div>\n<style>\n.eagtw--3 .eagtw__img:nth-child(n+4) { display: none; }\n.eagtw--6 .eagtw__img:nth-child(n+7) { display: none; }\n</style>", "react": "export function EagerLoading({\n resourceCount = \"{{resourceCount}}\",\n accent = \"{{accent}}\",\n showWarning = {{showWarning}},\n bytesEach = {{bytesEach}},\n}) {\n const n = Number(resourceCount);\n const items = Array.from({ length: 9 }, (_, i) => i).filter((i) => i < n);\n return (\n <div role=\"img\" aria-label={`${resourceCount} images, all loaded immediately, ${bytesEach}KB each`} style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontWeight: 700, fontSize: 12 }}>All {resourceCount} images requested at page load</p>\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3,1fr)\", gap: 6, marginBottom: 10 }}>\n {items.map((i) => <span key={i} style={{ display: \"block\", height: 34, borderRadius: 6, background: accent }} />)}\n </div>\n {showWarning && <p style={{ margin: 0, fontSize: 10, color: \"#24143099\" }}>Even images far below the fold download now, adding up to a heavier first load.</p>}\n </div>\n );\n}" }