From 92edb3d835f5f213a314caa3bec0b99699db94b2 Mon Sep 17 00:00:00 2001 From: Nolan Lawson 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 @@ } \ No newline at end of file + 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 } } - \ No newline at end of file +