Add priority and lazy loading to some images
This commit is contained in:
marzban-dev
@@ -42,6 +42,8 @@ const onSlideChange = (swiper: SwiperClass) => {
|
||||
:style="{
|
||||
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
|
||||
}"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
src="/img/heymlz/heymlz-category-seat.gif"
|
||||
/>
|
||||
<Swiper
|
||||
|
||||
@@ -214,6 +214,9 @@ onUnmounted(() => {
|
||||
|
||||
<NuxtImg
|
||||
v-else
|
||||
preload
|
||||
loading="eager"
|
||||
fetch-priority="high"
|
||||
class="absolute inset-0 size-full object-cover"
|
||||
:src="slide.image!"
|
||||
:alt="slide.title"
|
||||
@@ -265,6 +268,8 @@ onUnmounted(() => {
|
||||
filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
|
||||
}"
|
||||
src="/img/heymlz/heymlz-seat.gif"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
/>
|
||||
|
||||
<Button
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
// import
|
||||
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
@@ -7,7 +6,7 @@ import type { SwiperClass } from "swiper/react";
|
||||
|
||||
// types
|
||||
|
||||
type Props = {}
|
||||
type Props = {};
|
||||
|
||||
// props
|
||||
|
||||
@@ -23,7 +22,6 @@ const swiper_instance = ref<SwiperClass | null>(null);
|
||||
const onSwiper = (swiper: SwiperClass) => {
|
||||
swiper_instance.value = swiper;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -31,6 +29,8 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
<NuxtImg
|
||||
class="absolute size-full object-cover"
|
||||
src="/img/hero-bg.jpg"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
alt=""
|
||||
/>
|
||||
<div class="absolute bg-black/60 size-full z-10" />
|
||||
@@ -50,15 +50,18 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
>
|
||||
<div class="flex justify-center items-center">
|
||||
<div class="max-w-[900px] px-4 text-white flex flex-col items-center gap-4">
|
||||
<Icon name="ci:instagram" size="28" class="**:stroke-white" />
|
||||
<p class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-normal !leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
|
||||
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
|
||||
در ستون و سطرآنچنان که لازم.
|
||||
<Icon
|
||||
name="ci:instagram"
|
||||
size="28"
|
||||
class="**:stroke-white"
|
||||
/>
|
||||
<p
|
||||
class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-normal !leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center"
|
||||
>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
|
||||
است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.
|
||||
</p>
|
||||
<span class="typo-p-sm md:typo-p-xl text-center">
|
||||
- منصور مرزبان
|
||||
</span>
|
||||
<span class="typo-p-sm md:typo-p-xl text-center"> - منصور مرزبان </span>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
@@ -69,10 +72,8 @@ const onSwiper = (swiper: SwiperClass) => {
|
||||
v-for="(i, index) in 6"
|
||||
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
|
||||
class="border border-white size-1.5 md:size-2 rounded-full transition-all duration-200"
|
||||
>
|
||||
</div>
|
||||
></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@@ -88,6 +88,8 @@ watch(
|
||||
:src="homeData!.difreance_section.image1"
|
||||
class="select-none absolute size-full object-cover transition-[filter] duration-250 brightness-[95%]"
|
||||
:alt="homeData!.difreance_section.title1"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
/>
|
||||
<video
|
||||
v-else
|
||||
@@ -110,6 +112,8 @@ watch(
|
||||
:src="homeData!.difreance_section.image2"
|
||||
class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250 brightness-[95%]"
|
||||
:alt="homeData!.difreance_section.title2"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
/>
|
||||
<video
|
||||
v-else
|
||||
@@ -126,9 +130,7 @@ watch(
|
||||
:style="{
|
||||
left: `${clipPathPercent}%`,
|
||||
}"
|
||||
:class="[
|
||||
activeSlideVideo !== 'none' ? 'opacity-10' : '',
|
||||
]"
|
||||
:class="[activeSlideVideo !== 'none' ? 'opacity-10' : '']"
|
||||
class="select-none w-[5px] sm:w-2 bg-black h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
|
||||
>
|
||||
<div
|
||||
@@ -143,9 +145,7 @@ watch(
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end transition-opacity"
|
||||
>
|
||||
<div class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end transition-opacity">
|
||||
<div
|
||||
class="flex flex-col gap-2 text-black transition-opacity"
|
||||
:class="activeSlideVideo === 'right' ? 'opacity-0' : ''"
|
||||
|
||||
@@ -106,6 +106,8 @@ const childImageVariants = {
|
||||
<NuxtImg
|
||||
:src="slide.background_image"
|
||||
class="absolute size-full object-cover"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
/>
|
||||
</motion.div>
|
||||
</template>
|
||||
@@ -133,6 +135,8 @@ const childImageVariants = {
|
||||
<NuxtImg
|
||||
class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20 mt-40"
|
||||
:src="slide.image3"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
alt=""
|
||||
/>
|
||||
</motion.div>
|
||||
@@ -144,6 +148,8 @@ const childImageVariants = {
|
||||
<NuxtImg
|
||||
class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20"
|
||||
:src="slide.image2"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
alt=""
|
||||
/>
|
||||
</motion.div>
|
||||
@@ -155,6 +161,8 @@ const childImageVariants = {
|
||||
<NuxtImg
|
||||
class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20 mt-40"
|
||||
:src="slide.image1"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
alt=""
|
||||
/>
|
||||
</motion.div>
|
||||
@@ -222,6 +230,8 @@ const childImageVariants = {
|
||||
>
|
||||
<NuxtImg
|
||||
src="/img/heymlz/heymlz-falling.gif"
|
||||
loading="lazy"
|
||||
fetch-priority="low"
|
||||
class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
|
||||
/>
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user