Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Lazy load card images

Browse source
This commit is contained in:
Sam Carlton 2020-12-27 10:53:40 -06:00
parent 9019556009
commit 7cf5d488e5
1 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/video/card.vue
View file

@ -8,13 +8,18 @@
<div class="video-card-container relative overflow-hidden bg-black"> <div class="video-card-container relative overflow-hidden bg-black">
<div class="video-card-image ratio-wrapper"> <div class="video-card-image ratio-wrapper">
<div class="relative overflow-hidden w-full pb-16/9"> <div class="relative overflow-hidden w-full pb-16/9">
<img <picture>
:srcset="thumbnailSrcset" <source
:sizes="thumbnailSizes" :sizes="thumbnailSizes"
:src="video.thumbnails.default.url" :data-srcset="thumbnailSrcset"
:alt="video.name" type="image/jpg"
class="absolute h-full w-full object-cover" >
> <img
:data-src="video.thumbnails.default.url"
:alt="video.name"
class="lazyload absolute h-full w-full object-cover"
>
</picture>
</div> </div>
</div> </div>
<div <div
@ -57,6 +62,8 @@
<script> <script>
import 'lazysizes'
// import { getVideoEndpoint } from '~/helpers/app-derived.js' // import { getVideoEndpoint } from '~/helpers/app-derived.js'
export default { export default {