arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-03 13:47:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(app): improve images lazy loading

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-02 14:28:35 +02:00
parent 36c24ffe5c
commit 5025e15d14
6 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/app/pages/figma/index.vue
View File

@@ -155,7 +155,7 @@ onMounted(async () => {
:src="item.src" :src="item.src"
:alt="item.alt" :alt="item.alt"
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]" class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
lazy loading="lazy"
/> />
</template> </template>
</UTabs> </UTabs>
@@ -165,7 +165,7 @@ onMounted(async () => {
v-if="page.section2.image" v-if="page.section2.image"
v-bind="page.section2.image" v-bind="page.section2.image"
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]" class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
lazy loading="lazy"
/> />
</UPageSection> </UPageSection>
<UPageSection v-bind="page.section3" orientation="horizontal" :ui="{ container: 'py-16 sm:pt-16 lg:pt-16' }"> <UPageSection v-bind="page.section3" orientation="horizontal" :ui="{ container: 'py-16 sm:pt-16 lg:pt-16' }">
@@ -173,7 +173,7 @@ onMounted(async () => {
v-if="page.section3.image" v-if="page.section3.image"
v-bind="page.section3.image" v-bind="page.section3.image"
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]" class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
lazy loading="lazy"
/> />
</UPageSection> </UPageSection>
<USeparator /> <USeparator />
@@ -198,7 +198,7 @@ onMounted(async () => {
v-if="step.image" v-if="step.image"
v-bind="step.image" v-bind="step.image"
class="rounded-(--ui-radius)" class="rounded-(--ui-radius)"
lazy loading="lazy"
/> />
<div> <div>
<h2 class="font-semibold inline-flex items-center gap-x-1"> <h2 class="font-semibold inline-flex items-center gap-x-1">
@@ -272,6 +272,7 @@ onMounted(async () => {
:key="index" :key="index"
v-bind="logo" v-bind="logo"
class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0" class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0"
loading="lazy"
> >
</UPageMarquee> </UPageMarquee>
</UPageCTA> </UPageCTA>

2
docs/app/pages/index.vue
View File

@@ -302,8 +302,8 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
:src="`/pro/blocks/image${i}.png`" :src="`/pro/blocks/image${i}.png`"
width="460" width="460"
height="258" height="258"
:alt="`Nuxt UI Pro Screenshot ${i}`"
loading="lazy" loading="lazy"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white" class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
> >
</UPageMarquee> </UPageMarquee>

1
docs/app/pages/pro/pricing.vue
View File

@@ -81,6 +81,7 @@ useSeoMeta({
:key="index" :key="index"
v-bind="logo" v-bind="logo"
class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0" class="h-6 shrink-0 max-w-[140px] filter invert dark:invert-0"
loading="lazy"
> >
</UPageMarquee> </UPageMarquee>
<UContainer> <UContainer>

2
docs/app/pages/pro/templates.vue
View File

@@ -67,7 +67,7 @@ useSeoMeta({
:items="(template.images as any[])" :items="(template.images as any[])"
dots dots
> >
<NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" /> <NuxtImg v-bind="item" class="w-full h-full object-cover" width="576" height="360" loading="lazy" />
</UCarousel> </UCarousel>
<Placeholder v-else class="w-full h-full aspect-video" /> <Placeholder v-else class="w-full h-full aspect-video" />
</Motion> </Motion>

5
docs/app/pages/showcase.vue
View File

@@ -51,8 +51,9 @@ useSeoMeta({
<NuxtImg <NuxtImg
:src="`/assets/showcase/${item.name.toLowerCase().replace(/\s/g, '-')}.png`" :src="`/assets/showcase/${item.name.toLowerCase().replace(/\s/g, '-')}.png`"
:alt="`Screenshot of ${item.name}`" :alt="`Screenshot of ${item.name}`"
loading="lazy" width="311"
class="rounded-[calc(var(--ui-radius)*1.5)]" height="194"
class="rounded-[calc(var(--ui-radius)*1.5)] group-hover:scale-103 duration-200 transition-transform pointer-events-none"
/> />
<div class="flex items-center gap-1 px-1"> <div class="flex items-center gap-1 px-1">

8
docs/app/pages/team.vue
View File

@@ -62,7 +62,12 @@ const icons = {
variant="subtle" variant="subtle"
> >
<template #leading> <template #leading>
<UAvatar provider="ipx" :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${user.login}`" :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${user.login} 2x`" size="3xl" class="mx-auto" /> <UAvatar
:src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${user.login}`"
:srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${user.login} 2x`"
size="3xl"
class="mx-auto"
/>
</template> </template>
<div class="flex items-center justify-center gap-1"> <div class="flex items-center justify-center gap-1">
@@ -125,7 +130,6 @@ const icons = {
> >
<template #leading> <template #leading>
<UAvatar <UAvatar
provider="ipx"
:src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${contributor.username}`" :src="`https://ipx.nuxt.com/f_auto,s_80x80/gh_avatar/${contributor.username}`"
:srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${contributor.username} 2x`" :srcset="`https://ipx.nuxt.com/f_auto,s_160x160/gh_avatar/${contributor.username} 2x`"
size="3xl" size="3xl"