pinafore/routes/_components/LazyImage.html
2018-04-29 17:45:03 -07:00

50 lines
1.1 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()')
}
}
</script>