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

Carousel: Load only visible and sibling photos
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
Reduces page load:
- Preload the current and 2 next and previous ones
- If first of last photo, load the 2 last or first ones on the list
This commit is contained in:
Félix Péault
2020-04-06 13:00:34 +02:00
parent 8fabe68241
commit 6561b24f75
1 changed files with 46 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/organisms/Carousel.svelte
View File

@@ -8,6 +8,7 @@
// Dependencies
import SwipeListener from 'swipe-listener'
import lazySizes from 'lazysizes'
// Animations
import { animateIn } from 'animations/Carousel'
@@ -29,6 +30,34 @@
$: prevPhoto = photos[currentIndex - 1] || photos[photos.length - 1]
$: nextPhoto = photos[currentIndex + 1] || photos[0]
// Default size for the image
const defaultWidth = 900
const defaultHeight = Math.ceil(defaultWidth / 1.5)
// Get lazyload class
const getLazyloadClass = index => {
console.log(index, currentIndex)
// Preload current photo
if (index === currentIndex || index >= currentIndex - 2 && index <= currentIndex + 2) {
return true
}
// Preload the two previous and next photos
if (index >= currentIndex - 2 && index <= currentIndex + 2) {
return true
}
// If currentIndex = last photo, preload the two first ones
if (currentIndex === photos.length - 1 && (index === 0 || index === 1)) {
return true
}
// return false
// If currentIndex = first photo, preload the two last ones
// if (index) {
// }
return false
}
/*
** Navigate to a photo
@@ -112,9 +141,7 @@
*/
onMount(() => {
// Entering transition
if (photos) {
animateIn(scope)
}
animateIn(scope)
// Enable gestures
const touch = SwipeListener(scope)
@@ -132,7 +159,6 @@
<svelte:window on:keydown={keyboardNav} />
{#if photos}
<div class="carousel"
bind:this={scope}
on:swipe={event => swipe(event.detail.directions)}
@@ -148,11 +174,22 @@
on:click={openFullscreen}
>
<picture class="gallery__picture">
<source media="(min-width: 968px)" srcset={getThumbnail(image.private_hash, 1200)}>
<source media="(min-width: 800px)" srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" srcset={getThumbnail(image.private_hash, 400)}>
<img src="{getThumbnail(image.private_hash, 900)}" alt="{name}, {location.name}, {location.country.name}">
<source media="(min-width: 968px)" data-srcset={getThumbnail(image.private_hash, 1200)}>
<source media="(min-width: 800px)" data-srcset={getThumbnail(image.private_hash, 900)}>
<source media="(min-width: 500px)" data-srcset={getThumbnail(image.private_hash, 600)}>
<source media="(min-width: 300px)" data-srcset={getThumbnail(image.private_hash, 400)}>
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
alt="{name}, {location.name}, {location.country.name}"
width={defaultWidth} height={defaultHeight}
class:lazyload={
// Load the current index and the two previous/next ones
index === currentIndex || index >= currentIndex - 2 && index <= currentIndex + 2
// If last photo, load the two first ones (index = 0)
|| currentIndex === photos.length - 1 && (index === 0 || index === 1)
// If first photo, load the two last ones (index = photos length)
|| currentIndex === 0 && (index === photos.length - 1 || index === photos.length - 2)
}
>
</picture>
</div>
{/each}
@@ -210,4 +247,3 @@
on:goToIndex={event => currentIndex = event.detail}
/>
</div>
{/if}