heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add priority and lazy loading to some images

Browse Source
This commit is contained in:
marzban-dev
2025-09-09 10:45:27 +03:30
parent 8a498147e1
commit 4a21072e54
28 changed files with 192 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/product/ProductDetails.vue
+7 -13
View File
@@ -1,5 +1,4 @@
<script lang="ts" setup>
// import
import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
@@ -7,7 +6,6 @@ import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
// provide / inject
const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
</script>
<template>
@@ -20,30 +18,26 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
<Accordion />
</div>
<div class="w-full lg:w-[450px] xl:w-[600px]">
<div
class="w-full bg-slate-50 rounded-xl flex-col-center px-5 py-16 sm:p-[5rem] gap-[1.5rem]"
>
<div class="w-full bg-slate-50 rounded-xl flex-col-center px-5 py-16 sm:p-[5rem] gap-[1.5rem]">
<span class="typo-h-6 mb-8">داخل جعبه چیه؟</span>
<div
class="w-full grid grid-cols-2 gap-y-[1.5rem] sm:gap-x-[3rem]"
>
<div class="w-full grid grid-cols-2 gap-y-[1.5rem] sm:gap-x-[3rem]">
<div
v-for="inPackItem in selectedVariant!.in_pack_items"
class="w-full flex-col-center gap-[.75rem]"
>
<div
class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center"
>
<div class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center">
<div class="size-11 relative">
<NuxtImg
class="size-full absolute object-cover"
:src="inPackItem.cover"
:alt="inPackItem.item_title"
loading="lazy"
fetch-priority="low"
/>
</div>
</div>
<span class="text-black typo-p-md">
{{ inPackItem.item_title}}
{{ inPackItem.item_title }}
</span>
</div>
</div>
@@ -51,4 +45,4 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
</div>
</div>
</section>
</template>
</template>