Merge pull request #2 from tolking/dev

- use intersectionobserver instead of lozad
- add rootMargin and prefix config
- rename useLoading to useNative

ImgLazy.vue

@@ -2,7 +2,7 @@
   <img
     v-bind="$attrs"
     :data-src="dataSrc"
-    :loading="config.useLoading ? 'lazy' : null"
+    :loading="config.useNative ? 'lazy' : null"
     :class="config.selector"
   />
 </template>

README.md

@@ -2,9 +2,9 @@
 
 > a vuepress plugin to better supporting image lazy loading
 
-**The plugin will preferentially use native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through lozad**
+**The plugin will preferentially use native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through [IntersectionObserver](https://caniuse.com/#feat=intersectionobserver)**
 
-base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) and [lozad](https://github.com/ApoorvSaxena/lozad.js)
+base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize)
 
 [Live Demo and Documentation](https://tolking.github.io/vuepress-plugin-img-lazy/preview.html)
 
@@ -73,18 +73,34 @@ export default {
 
 ## Options
 
-### useLoading
+### useNative
 - Type: `Boolben`
 - Default: `true`
+- Required: `false`
 
 Use the native image lazy-loading for the web
 
 ### selector
 - Type: `string`
 - Default: `lazy`
+- Required: `false`
 
 Default class name for image
 
+### rootMargin
+- Type: `String`
+- Default: `200px`
+- Required: `false`
+
+rootMargin for IntersectionObserver
+
+### prefix
+- Type: `string` `Function`
+- Default: `src => src && src.charAt(0) === '/' && !src.startsWith(ctx.base) ? ctx.base + src.slice(1) : src`
+- Required: `false`
+
+Config prefix for src in images
+
 ## Other
 
 1. [Base URL](https://vuepress.vuejs.org/guide/assets.html#rBase%20URL) already included by default, But it does not include the `<img/>` label in the markdown file <Badge text="^1.0.2"/>

docs/.vuepress/config.js

@@ -57,9 +57,6 @@ module.exports = {
     }
   },
   plugins: [
-    [require.resolve('../../index.js'), {
-      useLoading: true,
-      selector: 'lazy'
-    }]
+    [require.resolve('../../index.js')]
   ]
 }

docs/README.md

@@ -2,9 +2,9 @@
 
 > a vuepress plugin to better supporting image lazy loading
 
-**The plugin will preferentially use native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through lozad**
+**The plugin will preferentially use native image [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through [IntersectionObserver](https://caniuse.com/#feat=intersectionobserver)**
 
-base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize) and [lozad](https://github.com/ApoorvSaxena/lozad.js)
+base on [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy) and [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize)
 
 ---
 
@@ -71,18 +71,34 @@ export default {
 
 ## Options
 
-### useLoading
+### useNative
 - Type: `Boolben`
 - Default: `true`
+- Required: `false`
 
 Use the native image lazy-loading for the web
 
 ### selector
 - Type: `string`
 - Default: `lazy`
+- Required: `false`
 
 Default class name for image
 
+### rootMargin
+- Type: `String`
+- Default: `200px`
+- Required: `false`
+
+rootMargin for IntersectionObserver
+
+### prefix
+- Type: `string` `Function`
+- Default: `src => src && src.charAt(0) === '/' && !src.startsWith(ctx.base) ? ctx.base + src.slice(1) : src`
+- Required: `false`
+
+Config prefix for src in images
+
 ## Other
 
 1. [Base URL](https://vuepress.vuejs.org/guide/assets.html#rBase%20URL) already included by default, But it does not include the `<img/>` label in the markdown file <Badge text="^1.0.2"/>

docs/zh/README.md

@@ -2,9 +2,9 @@
 
 > 一个为了更好的支持图片懒加载的 vuepress 插件
 
-**该插件将优先使用 [原生](https://caniuse.com/#feat=loading-lazy-attr) 的图片懒加载，如果浏览器不支持将通过 lozad 实现**
+**该插件将优先使用 [原生](https://caniuse.com/#feat=loading-lazy-attr) 的图片懒加载，如果浏览器不支持将通过 [IntersectionObserver](https://caniuse.com/#feat=intersectionobserver) 实现**
 
-基于 [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy)、 [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize)、 [lozad](https://github.com/ApoorvSaxena/lozad.js)
+基于 [markdown-it-img-lazy](https://github.com/tolking/markdown-it-img-lazy)、 [markdown-it-imsize](https://github.com/tatsy/markdown-it-imsize)
 
 ---
 
@@ -71,18 +71,34 @@ export default {
 
 ## 配置
 
-### useLoading
+### useNative
 - Type: `Boolben`
 - Default: `true`
+- Required: `false`
 
 是否使用基于原生的懒加载
 
 ### selector
 - Type: `string`
 - Default: `lazy`
+- Required: `false`
 
 默认的懒加载类名
 
+### rootMargin
+- Type: `String`
+- Default: `200px`
+- Required: `false`
+
+设置 IntersectionObserver 的 rootMargin 属性
+
+### prefix
+- Type: `string` `Function`
+- Default: `src => src && src.charAt(0) === '/' && !src.startsWith(ctx.base) ? ctx.base + src.slice(1) : src`
+- Required: `false`
+
+为图片的 src 配置前缀
+
 ## 其它说明
 
 1. 已经默认包含 [基础路径](https://vuepress.vuejs.org/zh/guide/assets.html#%E5%9F%BA%E7%A1%80%E8%B7%AF%E5%BE%84)，但不包括 markdown 文件里面的 `<img/>` 标签 <Badge text="^1.0.2"/>

enhanceAppFile.js

@@ -4,26 +4,48 @@ export default ({ Vue }) => {
   Vue.mixin({
     data() {
       return {
-        $imgLazyObserver: {}
-      }
-    },
-
-    computed: {
-      $supLoading() {
-        return config.useLoading && "loading" in HTMLImageElement.prototype
+        $io: undefined
       }
     },
 
     mounted() {
-      if (this.$supLoading) {
-        const lazyEls = document.querySelectorAll('img.' + config.selector)
+      const lazyEls = document.querySelectorAll('img.' + config.selector)
+      if (config.useNative && 'loading' in HTMLImageElement.prototype) {
         lazyEls.forEach(lazyEl => {
-          !lazyEl.getAttribute("src") && lazyEl.setAttribute("src", lazyEl.getAttribute("data-src"))
+          !lazyEl.getAttribute('src') && lazyEl.setAttribute('src', lazyEl.getAttribute('data-src'))
         })
       } else {
-        const lozad = require('lozad')
-        this.$imgLazyObserver = lozad('img.' + config.selector)
-        this.$imgLazyObserver.observe()
+        this.setObserver()
+        lazyEls.forEach(lazyEl => {
+          this.$io.observe(lazyEl)
+        })
+      }
+    },
+
+    methods: {
+      setObserver() {
+        this.$io = new IntersectionObserver(entries => {
+          entries.forEach(item => {
+            if (item.isIntersecting) {
+              const src = this.getSrc(item.target)
+
+              if (src) {
+                item.target.src = src
+              }
+              this.$io.unobserve(item.target)
+            }
+          })
+        }, {
+          rootMargin: config.rootMargin
+        })
+      },
+      getSrc(el) {
+        if (el.dataset) {
+          return el.dataset.src
+        } else {
+          const item = el.attributes.find(item => item.nodeName === 'data-src')
+          return item && item.nodeValue
+        }
       }
     }
   })

index.js

@@ -1,10 +1,18 @@
-const { path } = require('@vuepress/shared-utils')
+const path = require('path')
 
 module.exports = (options, ctx) => {
-  const {
-    useLoading = true,
-    selector = 'lazy'
-  } = options
+  const selector = options && options.selector ? options.selector : 'lazy'
+  const rootMargin = options && options.rootMargin ? options.rootMargin : '200px'
+  const useNative = options && typeof options.useNative === 'boolean'
+    ? options.useNative
+    : options && typeof options.useLoading === 'boolean'
+      ? options.useLoading
+      : true
+  const prefix = options && options.prefix
+    ? options.prefix
+    : src => src && src.charAt(0) === '/' && !src.startsWith(ctx.base)
+      ? ctx.base + src.slice(1)
+      : src
 
   return {
     name: 'vuepress-plugin-img-lazy',
@@ -25,18 +33,15 @@ module.exports = (options, ctx) => {
     },
 
     extendMarkdown: md => {
-      md.use(require('markdown-it-img-lazy'), { useLoading, selector })
-      md.use(require('./checkSrc.js'), { base: ctx.base })
+      md.use(require('markdown-it-img-lazy'), { useNative, selector, prefix })
       md.use(require('markdown-it-imsize'))
     },
 
     async clientDynamicModules () {
-      return [
-        {
-          name: 'imgLazy.js',
-          content: `export default ${JSON.stringify({ useLoading, selector })}`
-        }
-      ]
+      return [{
+        name: 'imgLazy.js',
+        content: `export default ${JSON.stringify({ useNative, selector, rootMargin })}`
+      }]
     },
 
     enhanceAppFiles: path.resolve(__dirname, 'enhanceAppFile.js')

package.json

@@ -1,7 +1,8 @@
 {
   "name": "vuepress-plugin-img-lazy",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "index.js",
+  "type": "commonjs",
   "description": "a vuepress plugin to better supporting image lazy loading",
   "author": "tolking <[email protected]>",
   "license": "MIT",
@@ -19,14 +20,13 @@
   "keywords": [
     "vuepress",
     "vuepress-plugin",
-    "lazy",
+    "lazy-loading",
     "img",
-    "loading",
+    "lazy",
     "data-src"
   ],
   "dependencies": {
-    "lozad": "^1.9.0",
-    "markdown-it-img-lazy": "^1.0.0",
+    "markdown-it-img-lazy": "^1.0.2",
     "markdown-it-imsize": "^2.0.1"
   },
   "devDependencies": {