forked from cybrespace/pinafore
59 lines
1.2 KiB
HTML
59 lines
1.2 KiB
HTML
<div class="lazy-image" style={computedStyle} >
|
|
{#if displaySrc}
|
|
<img
|
|
class={className}
|
|
aria-hidden={ariaHidden}
|
|
{alt}
|
|
{title}
|
|
{width}
|
|
{height}
|
|
src={displaySrc}
|
|
/>
|
|
{/if}
|
|
</div>
|
|
<style>
|
|
.lazy-image {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<script>
|
|
import { mark, stop } from '../_utils/marks'
|
|
import { decodeImage } from '../_utils/decodeImage'
|
|
|
|
export default {
|
|
async oncreate () {
|
|
mark('LazyImage oncreate()')
|
|
let { src, fallback } = this.get()
|
|
try {
|
|
await decodeImage(src)
|
|
this.set({ displaySrc: src })
|
|
} catch (e) {
|
|
if (fallback) {
|
|
this.set({ displaySrc: fallback })
|
|
}
|
|
}
|
|
stop('LazyImage oncreate()')
|
|
},
|
|
data: () => ({
|
|
displaySrc: void 0,
|
|
hidden: false,
|
|
fallback: void 0,
|
|
background: '',
|
|
width: void 0,
|
|
height: void 0,
|
|
className: '',
|
|
ariaHidden: '',
|
|
alt: '',
|
|
title: ''
|
|
}),
|
|
computed: {
|
|
computedStyle: ({ width, height, background }) => {
|
|
return [
|
|
width && `width: ${width}px;`,
|
|
height && `height: ${height}px;`,
|
|
background && `background: ${background};`
|
|
].filter(Boolean).join('')
|
|
}
|
|
}
|
|
}
|
|
</script> |