fix: remove lazy loading polyfill in favour of native (nuxt#256)

closes nuxt#213, closes nuxt#190
procrates · May 12, 2021 · 8f41dd0 · 8f41dd0
1 parent 10679a6
commit 8f41dd0
Show file tree

Hide file tree

Showing 9 changed files with 3 additions and 165 deletions.
diff --git a/docs/content/en/1.index.md b/docs/content/en/1.index.md
@@ -3,7 +3,6 @@ title: Introduction
 description: 'Nuxt Image is a module to optimise your application images.'
 category: 'Getting Started'
 features:
-  - Lazy Loading
   - Full Static Support
   - CDN Support
 ---

diff --git a/docs/content/en/2.components/1.nuxt-img.md b/docs/content/en/2.components/1.nuxt-img.md
@@ -10,7 +10,6 @@ category: Components
 - Uses built-in provider to optimize local and remote images
 - Converts `src` to provider optimized URLs
 - Automatically resizes images based on `width` and `height`
-- Support `loading="lazy"` for wider range of browsers including Safari using IntersectionObserver
 - Generates responsive sizes when providing `sizes` option
 
 Use it like you would use the `<img>` tag:

diff --git a/docs/content/en/2.components/2.nuxt-picture.md b/docs/content/en/2.components/2.nuxt-picture.md
@@ -9,7 +9,7 @@ category: Components
 `<nuxt-picture>` is a drop-in replacement for the native `<picture>` tag.
 
 Usage of `<nuxt-picture>` is almost identical to [`<nuxt-img>`](./nuxt-img)
-but also allows serving modern formats like `webp` when possible and at the moment only supports native lazy loading.
+but also allows serving modern formats like `webp` when possible.
 
 
 ## Props

diff --git a/src/runtime/components/lazy.mixin.ts b/src/runtime/components/lazy.mixin.ts
diff --git a/src/runtime/components/nuxt-img.vue b/src/runtime/components/nuxt-img.vue
@@ -10,7 +10,6 @@
 import type { DefineComponentWithMixin } from '../../types/vue'
 import type { ImageSizes } from '../../types'
 import { imageMixin } from './image.mixin'
-import { EMPTY_GIF, lazyMixin } from './lazy.mixin'
 
 import { parseSize } from '~image'
 
@@ -23,7 +22,7 @@ type NAttrs = typeof imageMixin['nImgAttrs'] & {
 
 export default defineComponent({
   name: 'NuxtImg',
-  mixins: [imageMixin, lazyMixin],
+  mixins: [imageMixin],
   computed: {
     nAttrs (): NAttrs {
       const attrs: NAttrs = this.nImgAttrs
@@ -35,12 +34,7 @@ export default defineComponent({
       return attrs
     },
     nSrc (): string {
-      // Calculate src first to trigger creation of static image
-      const src = this.sizes ? this.nSizes.src : this.$img(this.src, this.nModifiers, this.nOptions)
-      if (this.lazyLoad) {
-        return EMPTY_GIF
-      }
-      return src
+      return this.sizes ? this.nSizes.src : this.$img(this.src, this.nModifiers, this.nOptions)
     },
     /* eslint-disable no-undef */
     nSizes (): ImageSizes {

diff --git a/src/runtime/index.ts b/src/runtime/index.ts
@@ -1,3 +1,2 @@
 export * from './image'
 export * from './utils'
-export * from './utils/observer'
diff --git a/src/runtime/utils/observer.ts b/src/runtime/utils/observer.ts
diff --git a/test/unit/__snapshots__/image.test.ts.snap b/test/unit/__snapshots__/image.test.ts.snap
@@ -1,7 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Renders simple image Matches snapshot 1`] = `"<img src=\\"/_custom/image.png\\" width=\\"200\\" height=\\"200\\" sizes=\\"(max-width: 500px) 500px, 900px\\" srcset=\\"/_custom/image.png 500w, /_custom/image.png 900w\\">"`;
-
-exports[`Renders simple image registers an observer for lazy loading 1`] = `"<img src=\\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\\" width=\\"200\\" height=\\"200\\" loading=\\"lazy\\" sizes=\\"(max-width: 500px) 500px, 900px\\" srcset=\\"/_custom/image.png 500w, /_custom/image.png 900w\\">"`;
-
-exports[`Renders simple image registers an observer for lazy loading 2`] = `"<img src=\\"/_custom/image.png\\" width=\\"200\\" height=\\"200\\" loading=\\"lazy\\" sizes=\\"(max-width: 500px) 500px, 900px\\" srcset=\\"/_custom/image.png 500w, /_custom/image.png 900w\\">"`;
diff --git a/test/unit/image.test.ts b/test/unit/image.test.ts
@@ -6,8 +6,6 @@ import type Vue from 'vue'
 import { Wrapper } from '@vue/test-utils'
 
 import { getSrc, mountWithImg } from './utils/mount'
-import { mockObserver } from './utils/observer'
-import { nextTick } from './utils/tick'
 
 import NuxtImg from '~/runtime/components/nuxt-img.vue'
 
@@ -54,28 +52,4 @@ describe('Renders simple image', () => {
     const sizes = wrapper.find('img').element.getAttribute('sizes')
     expect(sizes).toBe('(max-width: 500px) 500px, 900px')
   })
-
-  test('registers an observer for lazy loading', async () => {
-    const observer = mockObserver()
-    wrapper = mountWithImg(NuxtImg, {
-      loading: 'lazy',
-      width: 200,
-      height: 200,
-      sizes: '200,500:500,900:900',
-      src
-    })
-
-    expect(observer.wasAdded).toBe(true)
-    expect(observer.wasDestroyed).toBe(false)
-
-    expect(wrapper.html()).toMatchSnapshot()
-
-    observer.triggerVisibility()
-
-    await nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
-
-    wrapper.destroy()
-    expect(observer.wasDestroyed).toBe(true)
-  })
 })