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:
parent
da7a29d503
commit
92edb3d835
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue