forked from cybrespace/pinafore
55 lines
1.2 KiB
HTML
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> |