Better GIF loading

scripts/feed.js

@@ -4,6 +4,7 @@ const audio = document.getElementById('audio')
 const audio_title = document.getElementById('audio_title')
 const modal = document.getElementById('modal')
 const download_button = document.getElementById('download_button')
+const gifs = document.getElementsByClassName("img-background")
 
 // -- HELPERS -- //
 const getHash = () => window.location.hash.substring(1)
@@ -101,32 +102,20 @@ const hashChange = () => {
   }
 }
 
-const swapImages = (e, mode) => {
+const swapImages = e => {
-  if (mode === 'gif') {
+  if (!e.target.src) {
-    const a = e.target
+    e.target.src = e.target.dataset.src
-    const img = a.children[0]
-    const gif = a.children[1]
-    img.classList.add('hidden')
-    gif.classList.remove('hidden')
-  } else if (mode === 'img') {
-    const gif = e.target
-    const img = e.target.parentElement.children[0]
-    img.classList.remove('hidden')
-    gif.classList.add('hidden')
   }
 }
 
-document.getElementById('modal-background').addEventListener('click', hideModel, false)
+document.getElementById('modal-background').addEventListener('click', hideModel)
-document.getElementById('modal-close').addEventListener('click', hideModel, false)
+document.getElementById('modal-close').addEventListener('click', hideModel)
 document.getElementById('back-button').addEventListener('click', () => moveVideo(false))
 document.getElementById('next-button').addEventListener('click', () => moveVideo(true))
 window.addEventListener('hashchange', hashChange, false)
 
 // Image hover
-const images = document.getElementsByClassName("clickable-img")
+for (let i = 0; i < gifs.length; i++) {
-for (let i = 0; i < images.length; i++) {
+  gifs[i].addEventListener('mouseenter', swapImages, false)
-  images[i].addEventListener('mouseenter', e => swapImages(e, 'gif'), false)
-  images[i].addEventListener('mouseout', e => swapImages(e, 'img'), false)
 }
-
 hashChange()

styles/feed.css

@@ -1,14 +1,26 @@
 #video {
-  height: 100%;
+	height: 100%;
-  overflow: hidden;
+	overflow: hidden;
 }
 
-.hidden {
+figure {
-	display: none;
+	position: relative;
+	display: inline-block;
 }
 
-/* Make gifs take all available space */
+.img-background {
-.clickable-img img {
 	width: 100%;
 	height: 100%;
 }
+
+figure .img-background {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 99;
+}
+
+figure:hover .img-background {
+	display: inline;
+}

views/components/feed.latte

@@ -2,8 +2,8 @@
 <section class="section">
   <div class="columns is-multiline is-vcentered">
 		{foreach $feed->items as $item}
-    <div class="column is-one-quarter">
+    <div class="column is-one-quarter clickable-img">
-			<a class="clickable-img" id="{$item->id}" href="#{$item->id}"
+			<a id="{$item->id}" href="#{$item->id}"
 				data-video_url="{path('stream?url=' . urlencode($item->video->playAddr))}"
 				data-video_download="{path('stream?url=' . urlencode($item->video->playAddr) . '&download=1')}"
         data-desc="{$item->desc}"
@@ -11,8 +11,10 @@
         data-video_height="{$item->video->height}"
         data-music_title="{$item->music->title}"
         data-music_url="{path('stream?url=' . urlencode($item->music->playUrl))}">
-        <img loading="lazy" src="{path('stream?url=' . urlencode($item->video->originCover))}" />
+				<figure>
-				<img class="hidden" loading="lazy" src="{path('stream?url=' . urlencode($item->video->dynamicCover))}" />
+        	<img class="img-main" loading="lazy" src="{path('stream?url=' . urlencode($item->video->originCover))}" />
+					<img class="img-background" loading="lazy" data-src="{path('stream?url=' . urlencode($item->video->dynamicCover))}" />
+				</figure>
       </a>
     </div>
     {/foreach}