pinafore/routes/_components/LazyImage.html
2018-03-13 23:07:30 -07:00

47 lines
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 || ''}}"
src="{{displaySrc}}"
:width
:height
/>
{{/if}}
</div>
<style>
.lazy-image {
overflow: hidden;
}
.lazy-image img {
transition: opacity 0.2s linear;
}
</style>
<script>
export default {
oncreate() {
requestAnimationFrame(() => {
let img = new Image()
let src = this.get('src')
let fallback = this.get('fallback')
img.onload = () => {
requestAnimationFrame(() => {
this.set({
displaySrc: src,
hidden: true
})
requestAnimationFrame(() => {
this.set({hidden: false})
})
})
}
img.onerror = () => {
this.set({displaySrc: fallback})
}
img.src = src
})
}
}
</script>