pinafore/routes/_components/LazyImage.html
Nolan Lawson 42be854521
upgrade to svelte 2.0 (#251)
* upgrade to svelte 2.0

* update svelte-loader to 2.9.0
2018-05-01 17:05:36 -07:00

55 lines
1.2 KiB
HTML

<div class="lazy-image"
style="width: {width}px; height: {height}px; background: {background};">
{#if displaySrc}
<img
class="{hidden ? 'hidden' : ''} {className || ''}"
aria-hidden={ariaHidden || ''}
alt={alt || ''}
title={alt || ''}
src={displaySrc}
{width}
{height}
/>
{/if}
</div>
<style>
.lazy-image {
overflow: hidden;
}
.lazy-image img {
transition: opacity 0.2s linear;
}
</style>
<script>
import { mark, stop } from '../_utils/marks'
export default {
oncreate () {
mark('LazyImage oncreate()')
let img = new Image()
let { src } = this.get()
let { fallback } = this.get()
img.onload = () => {
requestAnimationFrame(() => {
this.set({
displaySrc: src,
hidden: true
})
requestAnimationFrame(() => {
this.set({hidden: false})
})
})
}
img.onerror = () => {
this.set({displaySrc: fallback})
}
img.src = src
stop('LazyImage oncreate()')
},
data: () => ({
displaySrc: void 0,
hidden: false,
ariaHidden: false
})
}
</script>