Fix image lazy loading for Firefox (#3264)

src/components/ChannelItem.vue

@@ -2,7 +2,7 @@
     <div class="flex flex-col flex-justify-between">
         <router-link :to="props.item.url">
             <div class="my-4 flex justify-center">
-                <img class="aspect-square w-[50%] rounded-full" :src="props.item.thumbnail" loading="lazy" />
+                <img loading="lazy" class="aspect-square w-[50%] rounded-full" :src="props.item.thumbnail" />
             </div>
             <p>
                 <span v-text="props.item.name" />

src/components/ChannelPage.vue

@@ -3,10 +3,10 @@
 
     <LoadingIndicatorPage :show-content="channel != null && !channel.error">
         <img
+            loading="lazy"
             v-if="channel.bannerUrl"
             :src="channel.bannerUrl"
             class="h-30 w-full object-cover py-1.5 md:h-50"
-            loading="lazy"
         />
         <div class="flex flex-col items-center justify-between md:flex-row">
             <div class="flex place-items-center">

src/components/CommentItem.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="comment mt-1.5 flex">
         <img
+            loading="lazy"
             :src="comment.thumbnail"
             class="comment-avatar h-12 w-12 rounded-full"
             height="48"
             width="48"
-            loading="lazy"
             alt="Avatar"
         />
 

src/components/PlaylistItem.vue

@@ -2,7 +2,7 @@
     <div class="flex flex-col flex-justify-between">
         <router-link :to="props.item.url">
             <div class="relative">
-                <img class="w-full" :src="props.item.thumbnail" loading="lazy" />
+                <img loading="lazy" class="w-full" :src="props.item.thumbnail" />
             </div>
             <p>
                 <span v-text="props.item.name" />

src/components/PlaylistPage.vue

@@ -9,7 +9,7 @@
         <div class="mt-1 flex items-center justify-between">
             <div>
                 <router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'">
-                    <img :src="playlist.uploaderAvatar" loading="lazy" class="rounded-full" />
+                    <img loading="lazy" :src="playlist.uploaderAvatar" class="rounded-full" />
                     <strong v-text="playlist.uploader" />
                 </router-link>
             </div>

src/components/VideoItem.vue

@@ -13,11 +13,11 @@
         >
             <div class="w-full">
                 <img
+                    loading="lazy"
                     class="aspect-video w-full object-contain"
                     :src="thumbnail"
                     :alt="title"
                     :class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
-                    loading="lazy"
                 />
                 <!-- progress bar -->
                 <div class="relative h-1 w-full">
@@ -61,9 +61,9 @@
         <div class="flex">
             <router-link :to="item.uploaderUrl">
                 <img
+                    loading="lazy"
                     v-if="item.uploaderAvatar"
                     :src="item.uploaderAvatar"
-                    loading="lazy"
                     class="mr-0.5 mt-0.5 h-32px w-32px rounded-full"
                     width="68"
                     height="68"

src/components/WatchVideo.vue

@@ -73,11 +73,11 @@
                 <!-- Channel Image & Info -->
                 <div class="flex items-center">
                     <img
+                        loading="lazy"
                         height="48"
                         width="48"
                         :src="video.uploaderAvatar"
                         alt=""
-                        loading="lazy"
                         class="rounded-full"
                     />
                     <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">{{