pinafore/routes/_components/LazyImage.html

51 lines
1.1 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 || ''}}"
2018-03-14 07:07:30 +01:00
src="{{displaySrc}}"
: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 {
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()')
2018-03-14 07:07:30 +01:00
}
}
</script>