From 92edb3d835f5f213a314caa3bec0b99699db94b2 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 3 Dec 2018 23:08:38 -0800
Subject: [PATCH] fix(firefox): fix firefox with blocked images (#718)
* fix(firefox): fix firefox with blocked images
* remove excessive perf marks
* fixup
* fix lint
---
routes/_components/LazyImage.html | 5 +----
routes/_components/NonAutoplayImg.html | 16 ++++++++++++----
2 files changed, 13 insertions(+), 8 deletions(-)
diff --git a/routes/_components/LazyImage.html b/routes/_components/LazyImage.html
index 2f71d5fe..1c818fef 100644
--- a/routes/_components/LazyImage.html
+++ b/routes/_components/LazyImage.html
@@ -16,18 +16,15 @@
}
</style>
<script>
- import { mark, stop } from '../_utils/marks'
import { decodeImage } from '../_utils/decodeImage'
export default {
async oncreate () {
- mark('LazyImage oncreate()')
try {
await decodeImage(this.refs.node)
} catch (e) {
this.set({ error: true })
}
- stop('LazyImage oncreate()')
},
data: () => ({
error: false,
@@ -51,4 +48,4 @@
displaySrc: ({ error, src, fallback }) => ((error && fallback) || src)
}
}
-</script>
\ No newline at end of file
+</script>
diff --git a/routes/_components/NonAutoplayImg.html b/routes/_components/NonAutoplayImg.html
index a9866ee3..58e461d2 100644
--- a/routes/_components/NonAutoplayImg.html
+++ b/routes/_components/NonAutoplayImg.html
@@ -21,11 +21,16 @@
import { mouseover } from '../_utils/events'
import { decodeImage } from '../_utils/decodeImage'
import { classname } from '../_utils/classname'
+ import { ONE_TRANSPARENT_PIXEL } from '../_static/media'
export default {
async oncreate () {
+ let { currentSrc } = this.get()
try {
- await decodeImage(this.refs.node)
+ let image = new Image()
+ image.src = currentSrc
+ await decodeImage(image)
+ this.set({ loaded: true })
this.fire('imgLoad')
} catch (e) {
this.fire('imgLoadError', e)
@@ -42,7 +47,8 @@
data: () => ({
alt: '',
title: '',
- mouseOver: false
+ mouseOver: false,
+ loaded: false
}),
computed: {
computedClass: ({ className, src, staticSrc, isLink }) => (classname(
@@ -50,7 +56,9 @@
src !== staticSrc && 'non-autoplay-zoom-in',
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>
\ No newline at end of file
+</script>