fix(firefox): fix firefox with blocked images (#718)

* fix(firefox): fix firefox with blocked images

* remove excessive perf marks

* fixup

* fix lint
This commit is contained in:
Nolan Lawson 2018-12-03 23:08:38 -08:00 committed by GitHub
parent da7a29d503
commit 92edb3d835
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 8 deletions

View file

@ -16,18 +16,15 @@
} }
</style> </style>
<script> <script>
import { mark, stop } from '../_utils/marks'
import { decodeImage } from '../_utils/decodeImage' import { decodeImage } from '../_utils/decodeImage'
export default { export default {
async oncreate () { async oncreate () {
mark('LazyImage oncreate()')
try { try {
await decodeImage(this.refs.node) await decodeImage(this.refs.node)
} catch (e) { } catch (e) {
this.set({ error: true }) this.set({ error: true })
} }
stop('LazyImage oncreate()')
}, },
data: () => ({ data: () => ({
error: false, error: false,
@ -51,4 +48,4 @@
displaySrc: ({ error, src, fallback }) => ((error && fallback) || src) displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
} }
} }
</script> </script>

View file

@ -21,11 +21,16 @@
import { mouseover } from '../_utils/events' import { mouseover } from '../_utils/events'
import { decodeImage } from '../_utils/decodeImage' import { decodeImage } from '../_utils/decodeImage'
import { classname } from '../_utils/classname' import { classname } from '../_utils/classname'
import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
export default { export default {
async oncreate () { async oncreate () {
let { currentSrc } = this.get()
try { try {
await decodeImage(this.refs.node) let image = new Image()
image.src = currentSrc
await decodeImage(image)
this.set({ loaded: true })
this.fire('imgLoad') this.fire('imgLoad')
} catch (e) { } catch (e) {
this.fire('imgLoadError', e) this.fire('imgLoadError', e)
@ -42,7 +47,8 @@
data: () => ({ data: () => ({
alt: '', alt: '',
title: '', title: '',
mouseOver: false mouseOver: false,
loaded: false
}), }),
computed: { computed: {
computedClass: ({ className, src, staticSrc, isLink }) => (classname( computedClass: ({ className, src, staticSrc, isLink }) => (classname(
@ -50,7 +56,9 @@
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) currentSrc: ({ mouseOver, src, staticSrc }) => mouseOver ? src : staticSrc,
// using a transparent pixel as placeholder ensures broken images don't have wrong sizes
displaySrc: ({ loaded, currentSrc }) => loaded ? currentSrc : ONE_TRANSPARENT_PIXEL
} }
} }
</script> </script>