2018-03-14 06:07:30 +00:00
|
|
|
<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 || ''}}"
|
2018-04-11 04:02:42 +01:00
|
|
|
title="{{alt || ''}}"
|
2018-03-14 06:07:30 +00:00
|
|
|
src="{{displaySrc}}"
|
|
|
|
:width
|
|
|
|
:height
|
|
|
|
/>
|
|
|
|
{{/if}}
|
|
|
|
</div>
|
|
|
|
<style>
|
|
|
|
.lazy-image {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.lazy-image img {
|
|
|
|
transition: opacity 0.2s linear;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
2018-03-14 14:24:16 +00:00
|
|
|
import { mark, stop } from '../_utils/marks'
|
|
|
|
|
2018-03-14 06:07:30 +00:00
|
|
|
export default {
|
2018-04-20 02:42:29 +01:00
|
|
|
oncreate () {
|
2018-03-14 14:24:16 +00:00
|
|
|
mark('LazyImage oncreate()')
|
|
|
|
let img = new Image()
|
2018-04-19 17:37:05 +01:00
|
|
|
let { src } = this.get()
|
|
|
|
let { fallback } = this.get()
|
2018-03-14 14:24:16 +00:00
|
|
|
img.onload = () => {
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
this.set({
|
|
|
|
displaySrc: src,
|
|
|
|
hidden: true
|
|
|
|
})
|
2018-03-14 06:07:30 +00:00
|
|
|
requestAnimationFrame(() => {
|
2018-03-14 14:24:16 +00:00
|
|
|
this.set({hidden: false})
|
2018-03-14 06:07:30 +00:00
|
|
|
})
|
2018-03-14 14:24:16 +00:00
|
|
|
})
|
|
|
|
}
|
|
|
|
img.onerror = () => {
|
|
|
|
this.set({displaySrc: fallback})
|
|
|
|
}
|
|
|
|
img.src = src
|
|
|
|
stop('LazyImage oncreate()')
|
2018-03-14 06:07:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|