fix image loading (#527)

This commit is contained in:
Nolan Lawson 2018-08-31 16:35:26 -07:00 committed by GitHub
parent 9641b7ad1e
commit e92bed8e58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 37 deletions

View file

@ -1,5 +1,4 @@
<div class="lazy-image" style={computedStyle} > <div class="lazy-image" style={computedStyle} >
{#if displaySrc}
<img <img
class={className} class={className}
aria-hidden={ariaHidden} aria-hidden={ariaHidden}
@ -8,8 +7,8 @@
{width} {width}
{height} {height}
src={displaySrc} src={displaySrc}
ref:node
/> />
{/if}
</div> </div>
<style> <style>
.lazy-image { .lazy-image {
@ -23,20 +22,15 @@
export default { export default {
async oncreate () { async oncreate () {
mark('LazyImage oncreate()') mark('LazyImage oncreate()')
let { src, fallback } = this.get()
try { try {
await decodeImage(src) await decodeImage(this.refs.node)
this.set({ displaySrc: src })
} catch (e) { } catch (e) {
if (fallback) { this.set({ error: true })
this.set({ displaySrc: fallback })
}
} }
stop('LazyImage oncreate()') stop('LazyImage oncreate()')
}, },
data: () => ({ data: () => ({
displaySrc: void 0, error: false,
hidden: false,
fallback: void 0, fallback: void 0,
background: '', background: '',
width: void 0, width: void 0,
@ -53,7 +47,8 @@
height && `height: ${height}px;`, height && `height: ${height}px;`,
background && `background: ${background};` background && `background: ${background};`
].filter(Boolean).join('') ].filter(Boolean).join('')
} },
displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
} }
} }
</script> </script>

View file

@ -7,6 +7,7 @@
{height} {height}
src={displaySrc} src={displaySrc}
on:mouseover="onMouseOver(event)" on:mouseover="onMouseOver(event)"
ref:node
/> />
<style> <style>
.non-autoplay-zoom-in { .non-autoplay-zoom-in {
@ -19,15 +20,12 @@
<script> <script>
import { mouseover } from '../_utils/events' import { mouseover } from '../_utils/events'
import { decodeImage } from '../_utils/decodeImage' import { decodeImage } from '../_utils/decodeImage'
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
import { classname } from '../_utils/classname' import { classname } from '../_utils/classname'
export default { export default {
async oncreate () { async oncreate () {
let { staticSrc } = this.get()
try { try {
await decodeImage(staticSrc) await decodeImage(this.refs.node)
this.set({ displaySrc: staticSrc })
this.fire('imgLoad') this.fire('imgLoad')
} catch (e) { } catch (e) {
this.fire('imgLoadError', e) this.fire('imgLoadError', e)
@ -35,26 +33,24 @@
}, },
methods: { methods: {
onMouseOver (mouseOver) { onMouseOver (mouseOver) {
let { src, staticSrc, displaySrc } = this.get() this.set({ mouseOver })
if (displaySrc !== ONE_TRANSPARENT_PIXEL) {
this.set({ displaySrc: mouseOver ? src : staticSrc })
}
} }
}, },
events: { events: {
mouseover mouseover
}, },
data: () => ({ data: () => ({
displaySrc: ONE_TRANSPARENT_PIXEL,
alt: '', alt: '',
title: '' title: '',
mouseOver: false
}), }),
computed: { computed: {
computedClass: ({ className, src, staticSrc, isLink }) => (classname( computedClass: ({ className, src, staticSrc, isLink }) => (classname(
className, className,
src !== staticSrc && 'non-autoplay-zoom-in', src !== staticSrc && 'non-autoplay-zoom-in',
isLink && 'is-link' isLink && 'is-link'
)) )),
displaySrc: ({ src, staticSrc, mouseOver }) => (mouseOver ? src : staticSrc)
} }
} }
</script> </script>

View file

@ -1,13 +1,9 @@
export function decodeImage (src) { export function decodeImage (img) {
if (typeof Image.prototype.decode === 'function') { if (typeof img.decode === 'function') {
let img = new Image()
img.src = src
return img.decode() return img.decode()
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let img = new Image()
img.src = src
img.onload = resolve img.onload = resolve
img.onerror = reject img.onerror = reject
}) })