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> |