forked from cybrespace/pinafore
50 lines
No EOL
1.1 KiB
HTML
50 lines
No EOL
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 || ''}}"
|
|
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('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
|
|
stop('LazyImage oncreate()')
|
|
}
|
|
}
|
|
</script> |