Fixed tag photo scroll and lazy loading.

assets/components/tags/photos.vue

@@ -10,9 +10,11 @@
 		>
 			<img
 				:src="`/img/${poster.thumbnail}`"
+				:style="{ 'background-image': `url(/img/${poster.lazy})` }"
 				:alt="tag.poster.comment"
 				class="poster"
-				@load="$parent.$emit('load')"
+				loading="lazy"
+				@load="$emit('load', $event)"
 			>
 
 			<span
@@ -32,9 +34,10 @@
 		>
 			<img
 				:src="`/img/${photo.thumbnail}`"
+				:style="{ 'background-image': `url(/img/${photo.thumbnail})` }"
 				:alt="photo.comment"
 				class="photo"
-				@load="$parent.$emit('load')"
+				@load="$emit('load', $event)"
 			>
 
 			<span
@@ -69,6 +72,7 @@ export default {
 			default: null,
 		},
 	},
+	emits: ['load'],
 	computed: {
 		poster,
 		photos,
@@ -79,12 +83,9 @@ export default {
 <style lang="scss" scoped>
 .photos {
 	width: 100%;
-	padding: .5rem 1rem 0 .5rem;
+	padding: .5rem 1rem 0 1rem;
 	box-sizing: border-box;
-	overflow-x: auto;
 	white-space: nowrap;
-    scrollbar-width: none;
-	scroll-behavior: smooth;
     font-size: 0;
 
     &::-webkit-scrollbar {
@@ -112,9 +113,10 @@ export default {
 	display: inline-block;
 	position: relative;
 	overflow: hidden;
+	margin: 0 .5rem 0 0;
 
-	&:not(:last-child) {
+	&:last-child {
-		margin: 0 .5rem 0 0;
+		margin: 0 1rem 0 0;
 	}
 
 	&:hover .photo-comment {
@@ -127,6 +129,9 @@ export default {
 	max-height: 15rem;
 	max-width: 100%;
 	box-shadow: 0 0 3px var(--shadow-weak);
+	object-fit: cover;
+	background-position: center;
+	background-size: cover;
 }
 
 .photo-comment {

assets/components/tags/tag.vue

@@ -19,6 +19,7 @@
 
 			<Scroll
 				v-if="hasMedia"
+				v-slot="scroll"
 				:expanded="expanded"
 				class="scroll-light"
 				@expand="(state) => expanded = state"
@@ -26,6 +27,7 @@
 				<Photos
 					:tag="tag"
 					:class="{ expanded }"
+					@load="scroll.loaded"
 				/>
 			</Scroll>
 
@@ -159,4 +161,8 @@ export default {
 	color: var(--text-light);
 	background: var(--profile);
 }
+
+.scroll {
+	background: var(--background-dim);
+}
 </style>

assets/js/tags/actions.js

@@ -37,11 +37,13 @@ function initTagsActions(store, _router) {
                         media {
                             id
                             thumbnail
+							lazy
                             path
                             comment
                             sfw: sfwMedia {
                                 id
                                 thumbnail
+								lazy
                                 path
                                 comment
                             }