flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use Lazy Loading for photos

Browse Source
This commit is contained in:
Félix Péault
2020-02-20 19:01:54 +01:00
parent ece818fc39
commit 8ccdac64d3
2 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/molecules/Photo.svelte
View File

@@ -1,10 +1,11 @@
<script> <script>
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { site, currentLocation } from '../store' import { site, currentLocation } from '../store'
import * as fn from '../functions' import * as fn from '../functions'
// Dependencies // Dependencies
import AOS from 'aos'
import * as basicScroll from 'basicscroll' import * as basicScroll from 'basicscroll'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat' import advancedFormat from 'dayjs/plugin/advancedFormat'
@@ -14,6 +15,10 @@
export let index export let index
export let photo export let photo
// Default size for the image
const defaultWidth = 900
const defaultHeight = Math.ceil(defaultWidth / 1.5)
// Shortcut current location // Shortcut current location
let location let location
$: location = $currentLocation.location $: location = $currentLocation.location
@@ -23,11 +28,6 @@
** Run code on browser only ** Run code on browser only
*/ */
onMount(() => { onMount(() => {
// Scroll apparitions
if (process.browser) {
AOS.init()
}
// Parallax on photos // Parallax on photos
document.querySelectorAll('.photos .photo').forEach(photo => { document.querySelectorAll('.photos .photo').forEach(photo => {
const parallaxNumber = basicScroll.default.create({ const parallaxNumber = basicScroll.default.create({
@@ -41,12 +41,13 @@
to: '-25%' to: '-25%'
} }
} }
}).start() })
parallaxNumber.start()
}) })
}) })
</script> </script>
<div class="photo"> <div class="photo" transition:fly="{{ y: 40, duration: 1000, easing: quartOut }}">
<div class="photo__location wrap"> <div class="photo__location wrap">
<div class="wrapper"> <div class="wrapper">
<h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2> <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
@@ -58,11 +59,14 @@
<div class="align"> <div class="align">
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}"> <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
<picture class="photo__image--img"> <picture class="photo__image--img">
<source media="(min-width: 992px)" srcset={fn.getThumbnail(photo.image.private_hash, 1300)}> <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
<source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}> <source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
<source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}> <source media="(min-width: 500px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}> <source media="(min-width: 300px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
<img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}" <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
width={defaultWidth} height={defaultHeight}
data-src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}"
class="lazyload"
data-aos="scale-down-fade-in" data-aos="scale-down-fade-in"
> >
</picture> </picture>

1
src/routes/location/[country]/[location].svelte
View File

@@ -19,6 +19,7 @@
import { onMount } from 'svelte' import { onMount } from 'svelte'
// Dependencies // Dependencies
import 'lazysizes'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat' import advancedFormat from 'dayjs/plugin/advancedFormat'
import relativeTime from 'dayjs/plugin/relativeTime' import relativeTime from 'dayjs/plugin/relativeTime'