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

56
src/molecules/Photo.svelte
View File

@@ -1,10 +1,11 @@
<script>
import { onMount } from 'svelte'
import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
import { site, currentLocation } from '../store'
import * as fn from '../functions'
// Dependencies
import AOS from 'aos'
import * as basicScroll from 'basicscroll'
import dayjs from 'dayjs'
import advancedFormat from 'dayjs/plugin/advancedFormat'
@@ -14,6 +15,10 @@
export let index
export let photo
// Default size for the image
const defaultWidth = 900
const defaultHeight = Math.ceil(defaultWidth / 1.5)
// Shortcut current location
let location
$: location = $currentLocation.location
@@ -23,30 +28,26 @@
** Run code on browser only
*/
onMount(() => {
// Scroll apparitions
if (process.browser) {
AOS.init()
}
// Parallax on photos
document.querySelectorAll('.photos .photo').forEach(photo => {
const parallaxNumber = basicScroll.default.create({
elem: photo.querySelector('.photo__image--number'),
direct: true,
from: photo.getBoundingClientRect().top * 0.25,
to: photo.getBoundingClientRect().bottom * 0.92,
props: {
'--translate': {
from: '-75%',
to: '-25%'
}
}
}).start()
})
document.querySelectorAll('.photos .photo').forEach(photo => {
const parallaxNumber = basicScroll.default.create({
elem: photo.querySelector('.photo__image--number'),
direct: true,
from: photo.getBoundingClientRect().top * 0.25,
to: photo.getBoundingClientRect().bottom * 0.92,
props: {
'--translate': {
from: '-75%',
to: '-25%'
}
}
})
parallaxNumber.start()
})
})
</script>
<div class="photo">
<div class="photo" transition:fly="{{ y: 40, duration: 1000, easing: quartOut }}">
<div class="photo__location wrap">
<div class="wrapper">
<h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
@@ -58,11 +59,14 @@
<div class="align">
<a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
<picture class="photo__image--img">
<source media="(min-width: 992px)" 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: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" 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}"
<source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
<source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
<source media="(min-width: 500px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
<source media="(min-width: 300px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
<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"
>
</picture>