feat: load all images on print (#66)

nuxt · Nov 5, 2020 · 2c034de · 2c034de
1 parent 81b8f9d
commit 2c034de
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 17 deletions.
diff --git a/src/runtime/image.ts b/src/runtime/image.ts
@@ -193,36 +193,61 @@ export function createImage (context, { providers, defaultProvider, presets, int
   return image
 }
 
-function createObserver (options: object) {
-  const intersectOptions = {
+function printObserver (onMatch) {
+  if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') {
+    return
+  }
+
+  const mediaQueryList = window.matchMedia('print')
+  mediaQueryList.addListener((query) => {
+    if (query.matches) {
+      onMatch()
+    }
+  })
+}
+
+function intersectionObserver (onMatch, options) {
+  const observer = (typeof IntersectionObserver !== 'undefined' ? new IntersectionObserver(onMatch, {
     rootMargin: '50px',
     ...options
-  }
-  const observer = (typeof IntersectionObserver !== 'undefined' ? new IntersectionObserver(callback, intersectOptions) : {}) as IntersectionObserver
+  }) : {}) as IntersectionObserver
+
+  return observer
+}
+
+function createObserver (intersectionOptions: object) {
+  const callbackType = { intersect: 'onIntersect', print: 'onPrint' }
   const elementCallbackMap = {}
-  function callback (entries, imgObserver) {
+  function intersectionCallback (entries, imgObserver) {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
         const lazyImage = entry.target
         const callback = elementCallbackMap[lazyImage.__unique]
         if (typeof callback === 'function') {
-          callback()
+          callback(callbackType.intersect)
         }
         delete elementCallbackMap[lazyImage.__unique]
         imgObserver.unobserve(lazyImage)
       }
     })
   }
+
+  printObserver(() => {
+    Object.values(elementCallbackMap).forEach((callback: any) => callback(callbackType.print))
+  })
+
+  const intersectObserver = intersectionObserver(intersectionCallback, intersectionOptions)
+
   return {
     add (target, component, unique) {
       // add unique id to recognize target
       target.__unique = unique || target.id || target.__vue__._uid
       elementCallbackMap[target.__unique] = component
-      observer.observe(target)
+      intersectObserver.observe(target)
     },
     remove (target) {
       delete elementCallbackMap[target.__unique]
-      observer.unobserve(target)
+      intersectObserver.unobserve(target)
     }
   }
 }
diff --git a/src/runtime/nuxt-image-mixins.ts b/src/runtime/nuxt-image-mixins.ts
@@ -140,19 +140,13 @@ export default {
 
       if (this.lazy) {
         this.$img.$observer.remove(this.$el)
-        this.$img.$observer.add(this.$el, () => {
-          // OK, element is visible, Hoooray
-          this.loadOriginalImage()
-        })
+        this.$img.$observer.add(this.$el, this.onObserverEvent)
       }
     }
   },
   mounted () {
     if (this.lazy) {
-      this.$img.$observer.add(this.$el, () => {
-        // OK, element is visible, Hoooray
-        this.loadOriginalImage()
-      })
+      this.$img.$observer.add(this.$el, this.onObserverEvent)
     }
   },
   beforeDestroy () {
@@ -209,6 +203,17 @@ export default {
     // hanlde onLoad event of original image element
     onImageLoaded () {
       this.lazyState = LazyState.LOADED
+    },
+    onObserverEvent (type) {
+      if (type === 'onIntersect') {
+        // OK, element is visible, Hoooray
+        this.loadOriginalImage()
+        return
+      }
+      if (type === 'onPrint') {
+        this.$img.$observer.remove(this.$el)
+        this.lazyState = LazyState.LOADED
+      }
     }
   }
 }
diff --git a/test/fixture/utils/componet.ts b/test/fixture/utils/componet.ts
@@ -9,6 +9,7 @@ export function testComponent (Component, props) {
   function $img () {
     return src
   }
+  const eventType = { intersect: 'onIntersect' }
   $img.sizes = () => {
     return [{
       width: 200,
@@ -27,7 +28,7 @@ export function testComponent (Component, props) {
   $img.$observer = {
     add (_, callback) {
       observerAdded += 1
-      becomeVisible = callback
+      becomeVisible = () => callback(eventType.intersect)
     },
     remove () {
       observerDestroyed += 1