Fix image lazy loading for Firefox (#3264)

This commit is contained in:
anewuser 2023-12-18 13:20:23 -03:00 committed by GitHub
parent 49d4e58f6e
commit 5781599e9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 8 additions and 8 deletions

View File

@ -2,7 +2,7 @@
<div class="flex flex-col flex-justify-between"> <div class="flex flex-col flex-justify-between">
<router-link :to="props.item.url"> <router-link :to="props.item.url">
<div class="my-4 flex justify-center"> <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> </div>
<p> <p>
<span v-text="props.item.name" /> <span v-text="props.item.name" />

View File

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

View File

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

View File

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

View File

@ -9,7 +9,7 @@
<div class="mt-1 flex items-center justify-between"> <div class="mt-1 flex items-center justify-between">
<div> <div>
<router-link class="link flex items-center gap-3" :to="playlist.uploaderUrl || '/'"> <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" /> <strong v-text="playlist.uploader" />
</router-link> </router-link>
</div> </div>

View File

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

View File

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