fix image loading (#527)

routes/_components/LazyImage.html

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

routes/_components/NonAutoplayImg.html

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

routes/_utils/decodeImage.js

@@ -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 new Promise((resolve, reject) => {
-    let img = new Image()
-    img.src = src
     img.onload = resolve
     img.onerror = reject
   })