Better GIF loading
This commit is contained in:
parent
321067c37c
commit
ca926c4dfb
|
@ -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) => {
|
||||
if (mode === 'gif') {
|
||||
const a = e.target
|
||||
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')
|
||||
const swapImages = e => {
|
||||
if (!e.target.src) {
|
||||
e.target.src = e.target.dataset.src
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('modal-background').addEventListener('click', hideModel, false)
|
||||
document.getElementById('modal-close').addEventListener('click', hideModel, false)
|
||||
document.getElementById('modal-background').addEventListener('click', hideModel)
|
||||
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 < images.length; i++) {
|
||||
images[i].addEventListener('mouseenter', e => swapImages(e, 'gif'), false)
|
||||
images[i].addEventListener('mouseout', e => swapImages(e, 'img'), false)
|
||||
for (let i = 0; i < gifs.length; i++) {
|
||||
gifs[i].addEventListener('mouseenter', swapImages, false)
|
||||
}
|
||||
|
||||
hashChange()
|
||||
|
|
|
@ -1,14 +1,26 @@
|
|||
#video {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
figure {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Make gifs take all available space */
|
||||
.clickable-img img {
|
||||
.img-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
figure .img-background {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
figure:hover .img-background {
|
||||
display: inline;
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
<a class="clickable-img" id="{$item->id}" href="#{$item->id}"
|
||||
<div class="column is-one-quarter clickable-img">
|
||||
<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))}" />
|
||||
<img class="hidden" loading="lazy" src="{path('stream?url=' . urlencode($item->video->dynamicCover))}" />
|
||||
<figure>
|
||||
<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}
|
||||
|
|
Loading…
Reference in a new issue