pinafore/routes/_components/LazyImage.html

55 lines
1.2 KiB
HTML
Raw Normal View History

2018-03-14 07:07:30 +01:00
<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}}
2018-03-14 07:07:30 +01:00
:width
:height
/>
{{/if}}
</div>
<style>
.lazy-image {
overflow: hidden;
}
.lazy-image img {
transition: opacity 0.2s linear;
}
</style>
<script>
2018-03-14 15:24:16 +01:00
import { mark, stop } from '../_utils/marks'
2018-03-14 07:07:30 +01:00
export default {
2018-04-20 06:38:01 +02:00
oncreate () {
2018-03-14 15:24:16 +01:00
mark('LazyImage oncreate()')
let img = new Image()
let { src } = this.get()
let { fallback } = this.get()
2018-03-14 15:24:16 +01:00
img.onload = () => {
requestAnimationFrame(() => {
this.set({
displaySrc: src,
hidden: true
})
2018-03-14 07:07:30 +01:00
requestAnimationFrame(() => {
2018-03-14 15:24:16 +01:00
this.set({hidden: false})
2018-03-14 07:07:30 +01:00
})
2018-03-14 15:24:16 +01:00
})
}
img.onerror = () => {
this.set({displaySrc: fallback})
}
img.src = src
stop('LazyImage oncreate()')
},
data: () => ({
displaySrc: void 0,
hidden: false,
ariaHidden: false
})
2018-03-14 07:07:30 +01:00
}
</script>