Added lazy loading to tag photos. Changed tag thumb location.

assets/components/tags/tags.vue

@@ -6,11 +6,16 @@
         >
             <h3 class="heading">{{ category }}</h3>
 
-            <div class="tiles">
+            <div
+                :key="sfw"
+                v-lazy-container
+                class="tiles"
+            >
                 <Tag
                     v-for="tag in tags"
                     :key="`tag-${tag.id}`"
                     :tag="tag"
+                    :lazy="true"
                 />
             </div>
         </div>
@@ -20,6 +25,10 @@
 <script>
 import Tag from '../tile/tag.vue';
 
+function sfw() {
+    return this.$store.state.ui.sfw;
+}
+
 async function mounted() {
     const tagSlugsByCategory = {
         popular: [
@@ -29,21 +38,14 @@ async function mounted() {
             'mfm',
             'interracial',
             'blowjob',
-            'facial',
-            'creampie',
-            'teen',
-            'milf',
             'orgy',
             'gangbang',
             'double-penetration',
             'airtight',
-        ],
-        extreme: [
-            'double-anal',
-            'double-vaginal',
-            'da-tp',
-            'dv-tp',
-            'triple-anal',
+            'facial',
+            'creampie',
+            'teen',
+            'milf',
         ],
         oral: [
             'deepthroat',
@@ -54,13 +56,6 @@ async function mounted() {
             'ass-eating',
             'ass-to-mouth',
         ],
-        cumshot: [
-            'facial',
-            'bukkake',
-            'creampie',
-            'anal-creampie',
-            'cum-in-mouth',
-        ],
         appearance: [
             'asian',
             'ebony',
@@ -70,6 +65,20 @@ async function mounted() {
             'brunette',
             'redhead',
         ],
+        cumshot: [
+            'facial',
+            'bukkake',
+            'creampie',
+            'anal-creampie',
+            'cum-in-mouth',
+        ],
+        extreme: [
+            'double-anal',
+            'double-vaginal',
+            'da-tp',
+            'dv-tp',
+            'triple-anal',
+        ],
         roleplay: [
             'family',
             'schoolgirl',
@@ -105,6 +114,9 @@ export default {
             pageTitle: null,
         };
     },
+    computed: {
+        sfw,
+    },
     mounted,
 };
 </script>
@@ -118,7 +130,7 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
+    grid-template-columns: repeat(auto-fit, minmax(23rem, .33fr));
     grid-gap: 1rem;
     margin: 0 0 1.5rem 0;
 }
@@ -130,7 +142,7 @@ export default {
 
 @media(max-width: $breakpoint3) {
     .tiles {
-        grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
+        grid-template-columns: repeat(auto-fit, minmax(21rem, .5fr));
     }
 }
 

assets/components/tile/tag.vue

@@ -6,13 +6,41 @@
     >
         <span class="title">{{ tag.name }}</span>
 
-        <img
-            v-if="tag.poster"
-            :src="sfw ? `/img/${tag.poster.sfw.thumbnail}` : `/img/${tag.poster.thumbnail}`"
-            :title="sfw ? tag.poster.sfw.comment : tag.poster.comment"
-            :alt="tag.name"
-            class="poster"
-        >
+        <template v-if="tag.poster">
+            <img
+                v-if="!lazy && !sfw"
+                :src="`/img/${tag.poster.thumbnail}`"
+                :title="tag.poster.comment"
+                :alt="tag.name"
+                class="poster"
+            >
+
+            <img
+                v-if="!lazy && sfw"
+                :src="`/img/${tag.poster.sfw.thumbnail}`"
+                :title="tag.poster.sfw.comment"
+                :alt="tag.name"
+                class="poster"
+            >
+
+            <img
+                v-if="lazy && !sfw"
+                :data-src="`/img/${tag.poster.thumbnail}`"
+                :data-loading="`/img/${tag.poster.lazy}`"
+                :title="tag.poster.comment"
+                :alt="tag.name"
+                class="poster"
+            >
+
+            <img
+                v-if="lazy && sfw"
+                :data-src="`/img/${tag.poster.sfw.thumbnail}`"
+                :data-loading="`/img/${tag.poster.sfw.lazy}`"
+                :title="tag.poster.sfw.comment"
+                :alt="tag.name"
+                class="poster"
+            >
+        </template>
     </router-link>
 </template>
 
@@ -27,6 +55,10 @@ export default {
             type: Object,
             default: null,
         },
+        lazy: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         sfw,
@@ -52,7 +84,7 @@ export default {
 
 .poster {
     width: 100%;
-    height: 16rem;
+    height: 17rem;
     object-fit: cover;
     object-position: 50% 100%;
 }

assets/js/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
-import dayjs from 'dayjs';
 import VTooltip from 'v-tooltip';
+import VueLazyLoad from 'vue-lazyload';
+import dayjs from 'dayjs';
 
 import router from './router';
 import initStore from './store';
@@ -43,6 +44,9 @@ function init() {
     });
 
     Vue.use(VTooltip);
+    Vue.use(VueLazyLoad, {
+        throttleWait: 0,
+    });
 
     new Vue({ // eslint-disable-line no-new
         el: '#container',

assets/js/tags/actions.js

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