Skip to content

Commit c602a48

Browse files
feat:[lar-156] Add lazy loading in img
1 parent 6cec17e commit c602a48

File tree

7 files changed

+17
-8
lines changed

7 files changed

+17
-8
lines changed

resources/views/components/ads.blade.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<div id="laravelcm-ads">
44
<a href="{{ $ads['url'] }}" target="_blank" class="block aspect-[2/1] rounded-lg overflow-hidden ring-1 ring-gray-200/50 shadow dark:ring-white/20">
55
<img
6+
loading="lazy"
67
class="size-full object-cover"
78
src="{{ asset("/images/ads/{$ads['image']}.png") }}"
89
alt="{{ $ads['alt'] }}"

resources/views/components/discussions/overview.blade.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ class="text-gray-700 dark:text-gray-300 font-medium hover:underline"
5151
<div class="flex items-center justify-center gap-2">
5252
@foreach ($discussion->getReactionsSummary() as $reaction)
5353
<img
54+
loading="lazy"
5455
class="size-4"
5556
src="{{ asset("/images/reactions/{$reaction->name}.svg") }}"
5657
alt="{{ $reaction->name }} emoji"

resources/views/components/join-sponsors.blade.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@
1010
<div class="flex items-center justify-center px-2">
1111
<a href="https://laravelshopper.dev" target="_blank" class="flex items-center">
1212
<img
13+
loading="lazy"
1314
class="h-12 dark:hidden"
1415
src="{{ asset('/images/sponsors/shopper-logo.svg') }}"
1516
alt="Laravel Shopper"
1617
/>
1718
<img
19+
loading="lazy"
1820
class="hidden h-12 dark:block"
1921
src="{{ asset('/images/sponsors/shopper-logo-light.svg') }}"
2022
alt="Laravel Shopper"

resources/views/components/profile-users.blade.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<div class="flex justify-center -space-x-2 overflow-hidden py-1">
22
@foreach ($users as $user)
33
<img
4+
loading="lazy"
45
class="inline-block size-8 rounded-full ring-2 ring-white"
56
src="{{ $user->profile_photo_url }}"
67
alt="{{ $user->username }} avatar"

resources/views/components/sponsors.blade.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@
55
<div class="mt-5 space-y-5">
66
<a href="https://laravelshopper.dev" class="flex items-center justify-end">
77
<img
8+
loading="lazy"
89
class="logo-white h-10"
910
src="{{ asset('/images/sponsors/shopper-logo.svg') }}"
1011
alt="Laravel Shopper"
1112
/>
1213
<img
14+
loading="lazy"
1315
class="logo-dark h-10"
1416
src="{{ asset('/images/sponsors/shopper-logo-light.svg') }}"
1517
alt="Laravel Shopper"

resources/views/livewire/pages/articles/single-post.blade.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ class="size-6 ring-1 ring-offset-2 ring-gray-200 ring-offset-gray-50 dark:ring-w
9797
<div class="mt-4 lg:mt-0 lg:col-span-2">
9898
<div class="relative aspect-[16/9] lg:aspect-[2/1] rounded-xl shadow-lg overflow-hidden">
9999
<img
100+
loading="lazy"
100101
class="object-cover size-full"
101102
src="{{ $media }}"
102103
alt="{{ $article->title }}"

resources/views/livewire/reactions.blade.php

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ class="size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:gr
4444
<div class="flex items-center justify-center space-x-2">
4545
@foreach ($model->getReactionsSummary() as $reaction)
4646
<img
47+
loading="lazy"
4748
class="size-4"
4849
src="{{ asset("/images/reactions/{$reaction->name}.svg") }}"
4950
alt="{{ $reaction->name }} emoji"
@@ -73,28 +74,28 @@ class="absolute z-30 left-6 w-auto origin-top-left"
7374
<div class="rounded-full bg-white ring-1 ring-inset ring-gray-100 px-3 py-1.5 dark:bg-gray-800 dark:ring-white/10">
7475
<div class="reactions flex items-center gap-4">
7576
<button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('clap')">
76-
<img src="{{ asset('/images/reactions/clap.svg') }}" class="size-5" alt="clap emoji" />
77+
<img loading="lazy" src="{{ asset('/images/reactions/clap.svg') }}" class="size-5" alt="clap emoji" />
7778
</button>
7879
<button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('fire')">
79-
<img src="{{ asset('/images/reactions/fire.svg') }}" class="size-5" alt="fire emoji" />
80+
<img loading="lazy" src="{{ asset('/images/reactions/fire.svg') }}" class="size-5" alt="fire emoji" />
8081
</button>
8182
<button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('handshake')">
82-
<img src="{{ asset('/images/reactions/handshake.svg') }}" class="size-5" alt="handshake emoji" />
83+
<img loading="lazy" src="{{ asset('/images/reactions/handshake.svg') }}" class="size-5" alt="handshake emoji" />
8384
</button>
8485
<button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('joy')">
85-
<img src="{{ asset('/images/reactions/joy.svg') }}" class="size-5" alt="joy emoji" />
86+
<img loading="lazy" src="{{ asset('/images/reactions/joy.svg') }}" class="size-5" alt="joy emoji" />
8687
</button>
8788
<button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('love')">
88-
<img src="{{ asset('/images/reactions/love.svg') }}" class="size-5" alt="love emoji" />
89+
<img loading="lazy" src="{{ asset('/images/reactions/love.svg') }}" class="size-5" alt="love emoji" />
8990
</button>
9091
<button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('money')">
91-
<img src="{{ asset('/images/reactions/money.svg') }}" class="size-5" alt="money emoji" />
92+
<img loading="lazy" src="{{ asset('/images/reactions/money.svg') }}" class="size-5" alt="money emoji" />
9293
</button>
9394
<button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('party')">
94-
<img src="{{ asset('/images/reactions/party.svg') }}" class="size-5" alt="party emoji" />
95+
<img loading="lazy" src="{{ asset('/images/reactions/party.svg') }}" class="size-5" alt="party emoji" />
9596
</button>
9697
<button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('pray')">
97-
<img src="{{ asset('/images/reactions/pray.svg') }}" class="size-5" alt="pray" />
98+
<img loading="lazy" src="{{ asset('/images/reactions/pray.svg') }}" class="size-5" alt="pray" />
9899
</button>
99100
</div>
100101
</div>

0 commit comments

Comments
 (0)