by gildesmarais
🧙🏽♀️ Automatically adds loading="lazy" to and tags. Load images on your sites lazily without JavaScript.</p> </p><div class="mt-5 rounded-xl border border-fuchsia-100 bg-fuchsia-50/60 p-4"><p class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-fuchsia-700 uppercase"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z"/></svg>AI summary</p><p class="mt-2 font-semibold">Lazy loader</p><p class="mt-1 text-sm leading-relaxed text-zinc-700">Automatically adds lazy loading to images and iframes in a Jekyll site without JavaScript.</p></div><dl class="mt-6 flex flex-wrap gap-x-8 gap-y-4"><div title="61" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>stars</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">61</dd></div><div title="3" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="5" r="2"/><circle cx="18" cy="5" r="2"/><circle cx="12" cy="19" r="2"/><path d="M6 7v1a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V7M12 11v6"/></svg>forks</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">3</dd></div><div title="3" class="block"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>watching</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">3</dd></div><a href="#backlinks" title="Awesome lists that link here" class="block group"><dt class="flex items-center gap-1.5 font-mono text-[11px] tracking-widest text-zinc-500 uppercase group-hover:text-fuchsia-700"><svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></svg>awesome list</dt><dd class="mt-0.5 font-display text-2xl font-bold tabular-nums">1</dd></a></dl><div class="mt-6 flex flex-wrap items-center gap-2"><a href="https://github.com/gildesmarais/jekyll-loading-lazy" class="inline-flex items-center gap-2 rounded-full bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-700"><svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.42-2.69 5.39-5.26 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5z"></path></svg>View on GitHub</a><button type="button" onclick="document.getElementById('embed-badge').showModal()" class="inline-flex items-center gap-2 rounded-full border border-zinc-200 py-1.5 pr-4 pl-2 text-sm font-medium text-zinc-700 transition-colors hover:border-zinc-300 hover:text-zinc-900" title="Show the badge in your README"><img src="/shield/gildesmarais/jekyll-loading-lazy/links.svg" alt="Awesome Lists badge" class="h-5">Embed badge</button><dialog id="embed-badge" aria-labelledby="embed-badge-title" class="m-auto w-[calc(100%-2rem)] rounded-2xl bg-white p-6 text-zinc-900 shadow-2xl backdrop:bg-black/50 backdrop:backdrop-blur-sm max-w-2xl"><div class="flex items-start justify-between gap-4"><h2 id="embed-badge-title" class="font-display text-xl font-bold">Embed the badge</h2><form method="dialog"><button class="-m-1 rounded-full p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900" aria-label="Close"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg></button></form></div><p class="mt-1 text-sm text-zinc-600">Show how many awesome lists link to your project. The count updates automatically.</p><img src="/shield/gildesmarais/jekyll-loading-lazy/links.svg" alt="Awesome Lists badge" class="mt-4 h-5"><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Markdown</span><button type="button" data-copy="embed-md" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-md" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800">[](https://awesome.facts.dev/awesome/gildesmarais/jekyll-loading-lazy)</pre></div><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">HTML</span><button type="button" data-copy="embed-html" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-html" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800"><a href="https://awesome.facts.dev/awesome/gildesmarais/jekyll-loading-lazy"><img src="https://awesome.facts.dev/shield/gildesmarais/jekyll-loading-lazy/links.svg" alt="Awesome Lists Badge" /></a></pre></div><div class="mt-5"><div class="flex items-center justify-between"><span class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Image URL</span><button type="button" data-copy="embed-url" class="rounded-full px-3 py-1 font-mono text-xs text-fuchsia-700 hover:bg-fuchsia-50">Copy</button></div><pre id="embed-url" class="mt-1 overflow-x-auto rounded-lg bg-zinc-100 p-3 font-mono text-xs whitespace-pre-wrap break-all text-zinc-800">https://awesome.facts.dev/shield/gildesmarais/jekyll-loading-lazy/links.svg</pre></div></dialog></div><ul class="mt-6 flex flex-wrap gap-1.5"><li><a href="/search?q=iframe" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#iframe</a></li><li><a href="/search?q=iframes" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#iframes</a></li><li><a href="/search?q=image" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#image</a></li><li><a href="/search?q=img" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#img</a></li><li><a href="/search?q=jekyll" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#jekyll</a></li><li><a href="/search?q=jekyll-plugin" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#jekyll-plugin</a></li><li><a href="/search?q=lazy" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#lazy</a></li><li><a href="/search?q=lazy-load" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#lazy-load</a></li><li><a href="/search?q=lazy-load-img" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#lazy-load-img</a></li><li><a href="/search?q=lazy-loading" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#lazy-loading</a></li><li><a href="/search?q=lazyload" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#lazyload</a></li><li><a href="/search?q=lazyload-images" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#lazyload-images</a></li><li><a href="/search?q=lazyloading" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#lazyloading</a></li><li><a href="/search?q=loading" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#loading</a></li><li><a href="/search?q=loading-lazy" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#loading-lazy</a></li><li><a href="/search?q=native" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#native</a></li><li><a href="/search?q=pagespeed" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#pagespeed</a></li><li><a href="/search?q=performance" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#performance</a></li><li><a href="/search?q=webperformance" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#webperformance</a></li><li><a href="/search?q=webvitals" class="block rounded-full bg-zinc-100 px-2.5 py-1 font-mono text-xs text-zinc-600 transition-colors hover:bg-fuchsia-50 hover:text-fuchsia-700">#webvitals</a></li></ul></div></header><section id="related" class="mt-16 scroll-mt-20"><h2 class="font-display text-2xl font-bold tracking-tight">Similar projects</h2><p class="mt-1 text-sm text-zinc-500">Found by comparing what the projects do, not just their names.</p><ul class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/jambonn/vue-lazyload" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/10803710?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">jambonn/</span><span class="font-semibold">vue-lazyload</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>36</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js module for lazy-loading images in web applications.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/vvo/lazyload" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/123822?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">vvo/</span><span class="font-semibold">lazyload</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>938</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">An image lazyloading library for optimizing page load times by delaying the loading of non-visible elements until they come into view.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/tolking/vue-lazy-loading" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/23313167?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">tolking/</span><span class="font-semibold">vue-lazy-loading</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>8</span></div><p class="mt-3 text-sm font-semibold">Lazy Loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue plugin that optimizes image and iframe loading by leveraging native lazy-loading capabilities when available.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/lowesyang/vue-lazyload-images" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/10328169?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">lowesyang/</span><span class="font-semibold">vue-lazyload-images</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>61</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js plugin that enables lazy loading of images.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/magepal/magento2-catalog-lazy-load" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/8450647?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">magepal/</span><span class="font-semibold">magento2-catalog-lazy-load</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>58</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Improves page load time by loading images on demand as the user scrolls</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/wormsan/vue-lazyload-img" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/6257388?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">wormsan/</span><span class="font-semibold">vue-lazyload-img</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>249</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">An image lazy loading plugin for Vue.js, optimized for mobile browsers.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/lsycxyj/vue-l-lazyload" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/916567?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">lsycxyj/</span><span class="font-semibold">vue-l-lazyload</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>25</span></div><p class="mt-3 text-sm font-semibold">Lazy loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js plugin for lazy loading images and other content</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/nkoehring/v-lazy-img" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/246402?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">nkoehring/</span><span class="font-semibold">v-lazy-img</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>26</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue.js directive for lazy loading images</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/kazap/lazyload-vue" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/1121355?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">kazap/</span><span class="font-semibold">lazyload-vue</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>29</span></div><p class="mt-3 text-sm font-semibold">Vue image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue plugin for lazy loading images and other content using the vanilla-lazyload library</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/selimdoyranli/v-lazy-component" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/22690563?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">selimdoyranli/</span><span class="font-semibold">v-lazy-component</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>61</span></div><p class="mt-3 text-sm font-semibold">Lazy loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue component that enables lazy loading of child components when they come into view</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/isc30/blazor-lazy-loading" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/10807051?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">isc30/</span><span class="font-semibold">blazor-lazy-loading</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>97</span></div><p class="mt-3 text-sm font-semibold">Lazy loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Provides support for lazy loading in Blazor applications to improve performance by delaying the loading of non-essential components until they are needed.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/duizendnegen/ember-cli-lazy-load" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/665795?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">duizendnegen/</span><span class="font-semibold">ember-cli-lazy-load</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>42</span></div><p class="mt-3 text-sm font-semibold">Bundle loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">Supports lazy loading of Ember applications by splitting them into bundles</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/tvler/lazy-progressive-enhancement" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/4934193?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">tvler/</span><span class="font-semibold">lazy-progressive-enhancement</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>191</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A utility function for lazy loading images while enforcing progressive enhancement and valid HTML.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/shprink/bttrlazyloading" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/1388706?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">shprink/</span><span class="font-semibold">bttrlazyloading</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>414</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A responsive lazy loading plugin for images that adapts to different screen sizes and devices.</p></li><li class="flex min-w-0 flex-col rounded-2xl border border-zinc-200 p-4 transition hover:border-fuchsia-600 hover:shadow-md"><div class="flex items-center gap-2"><a href="/awesome/peterroe/vue-img-lazy-tiny" class="group inline-flex min-w-0 items-center gap-2 flex-1 text-sm"><img src="https://avatars.githubusercontent.com/u/59404696?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">peterroe/</span><span class="font-semibold">vue-img-lazy-tiny</span></span></a><span class="flex shrink-0 items-center gap-1 font-mono text-xs text-zinc-500"><svg class="size-3 text-amber-500" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z"/></svg>5</span></div><p class="mt-3 text-sm font-semibold">Image loader</p><p class="mt-1 line-clamp-4 text-sm text-zinc-600">A Vue directive for lazy loading images with a shield element and loading spinner.</p></li></ul></section><section id="backlinks" class="mt-16 scroll-mt-20"><h2 class="font-display text-2xl font-bold tracking-tight">Featured in 1 awesome list</h2><p class="mt-1 text-sm text-zinc-500">Each link jumps to the spot where the list mentions jekyll-loading-lazy.</p><ul class="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"><li class="flex min-w-0 items-center gap-2 rounded-xl border border-zinc-200 px-3 py-2.5 text-sm transition-colors hover:border-fuchsia-600"><a href="/awesome/jeffreytse/jekyll-spaceship#gildesmarais/jekyll-loading-lazy" class="group inline-flex min-w-0 items-center gap-2 flex-1"><img src="https://avatars.githubusercontent.com/u/9413601?v=4" class="size-6 shrink-0 rounded-md bg-zinc-100" width="24" height="24" loading="lazy" alt=""><span class="truncate group-hover:text-fuchsia-700"><span class="text-zinc-500">jeffreytse/</span><span class="font-semibold">jekyll-spaceship</span></span></a></li></ul></section></main></div><footer class="border-t border-zinc-200 bg-zinc-50"><div class="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-8 text-sm sm:flex-row sm:items-start sm:justify-between"><div><a href="/" class="flex items-center gap-2 font-display text-lg font-bold tracking-tight"><img loading="lazy" src="/favicon.png" width="22" height="22" alt=""><span>Awesome <span class="text-fuchsia-600">Lists</span></span></a><p class="mt-2 text-zinc-500">Awesome links for awesome devs. © 2026 awesome.facts.dev</p><p class="mt-2 font-mono text-xs text-zinc-500">press <kbd class="rounded border border-zinc-300 px-1">/</kbd> to search</p></div><ul class="flex flex-wrap gap-x-5 gap-y-2"><li><a href="/about" class="text-zinc-600 hover:text-fuchsia-700">About</a></li><li><a href="/search" class="text-zinc-600 hover:text-fuchsia-700">Search</a></li><li><a href="https://www.facts.dev" class="text-zinc-600 hover:text-fuchsia-700">facts.dev</a></li><li><a href="https://news.facts.dev" class="text-zinc-600 hover:text-fuchsia-700">Smart News</a></li><li><a href="https://bluefacts.app/" class="text-zinc-600 hover:text-fuchsia-700">BlueFacts</a></li><li><a href="https://freeappy.com" class="text-zinc-600 hover:text-fuchsia-700">FreeAppy games</a></li></ul></div></footer><dialog id="add-project" aria-labelledby="add-project-title" class="m-auto w-[calc(100%-2rem)] rounded-2xl bg-white p-6 text-zinc-900 shadow-2xl backdrop:bg-black/50 backdrop:backdrop-blur-sm max-w-md"><div class="flex items-start justify-between gap-4"><h2 id="add-project-title" class="font-display text-xl font-bold">Add a GitHub project</h2><form method="dialog"><button class="-m-1 rounded-full p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900" aria-label="Close"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg></button></form></div><p class="mt-1 text-sm text-zinc-600">Missing a project or an awesome list? Paste its GitHub URL and we fetch it right away.</p><form class="mt-4"><label for="project-url" class="font-mono text-xs tracking-wide text-zinc-500 uppercase">Project URL</label><input id="project-url" type="url" required placeholder="https://github.com/owner/repo" class="mt-1 w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-zinc-900 placeholder:text-zinc-400 focus:border-fuchsia-600 focus:outline-none"><p data-error class="mt-2 text-sm text-red-700" aria-live="polite"></p><div class="mt-4 flex justify-end gap-2 text-sm"><button type="button" data-close class="rounded-full px-4 py-1.5 text-zinc-600 hover:bg-zinc-100">Cancel</button><button type="submit" class="rounded-full bg-zinc-900 px-4 py-1.5 font-medium text-white disabled:opacity-50">Add project</button></div></form></dialog><script type="module" src="/_astro/Layout.astro_astro_type_script_index_0_lang.CNPGAtk_.js"></script></body></html>
