mirror of
				https://github.com/TeamPiped/Piped.git
				synced 2024-08-14 23:57:27 +00:00 
			
		
		
		
	Fix image lazy loading for Firefox (#3264)
This commit is contained in:
		
							parent
							
								
									49d4e58f6e
								
							
						
					
					
						commit
						5781599e9b
					
				
					 7 changed files with 8 additions and 8 deletions
				
			
		| 
						 | 
				
			
			@ -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" />
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
        />
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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" />
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">{{
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue