From 67f8a0bd8552202ef12ee602f156a8352a4aa44b Mon Sep 17 00:00:00 2001 From: tolking Date: Wed, 8 Jul 2020 20:52:09 +0800 Subject: [PATCH] docs: change README --- README.md | 22 +++++++++++++++++++--- docs/README.md | 22 +++++++++++++++++++--- docs/zh/README.md | 22 +++++++++++++++++++--- package.json | 10 +++++----- 4 files changed, 62 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 48e37ee..11e3c03 100644 --- a/README.md +++ b/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 `` label in the markdown file diff --git a/docs/README.md b/docs/README.md index f5d4a7b..1d08030 100644 --- a/docs/README.md +++ b/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 `` label in the markdown file diff --git a/docs/zh/README.md b/docs/zh/README.md index fabbb91..cd48f3e 100644 --- a/docs/zh/README.md +++ b/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 文件里面的 `` 标签 diff --git a/package.json b/package.json index f8737d2..49a529c 100644 --- a/package.json +++ b/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 ", "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": {