pinafore/routes/_components/LazyImage.html
Nolan Lawson 8949b36873
Use img.decode() (#473)
* remove will-change:transform from container

* WIP: use img.decode()

* more work on img.decode
2018-08-22 21:00:53 -07:00

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>