From cf0df8ccec04c84de156b63e2163cc52c337c0d3 Mon Sep 17 00:00:00 2001 From: sy-records <52o@qq52o.cn> Date: Sat, 28 Nov 2020 10:50:13 +0800 Subject: [PATCH 1/4] feat: Support browser-level image lazy-loading --- docs/helpers.md | 6 ++++++ src/core/render/compiler/image.js | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/docs/helpers.md b/docs/helpers.md index 46ff81d32..ef0460c5d 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -121,6 +121,12 @@ Only when you both set the `routerMode: 'history'` and `externalLinkTarget: '_se ![logo](https://docsify.js.org/_media/icon.svg ':id=someCssId') ``` +### Lazy Loading + +```md +![logo](https://docsify.js.org/_media/icon.svg ':loading=lazy') +``` + ## Customise ID for headings ```md diff --git a/src/core/render/compiler/image.js b/src/core/render/compiler/image.js index 982e5e55e..95e0d7b3c 100644 --- a/src/core/render/compiler/image.js +++ b/src/core/render/compiler/image.js @@ -34,6 +34,10 @@ export const imageCompiler = ({ renderer, contentBase, router }) => attrs.push(`id="${config.id}"`); } + if (config.loading) { + attrs.push(`loading="${config.loading}"`); + } + if (!isAbsolutePath(href)) { url = getPath(contentBase, getParentPath(router.getCurrentPath()), href); } From bdf3bd4968cb70562492ae3f01b0990d3863b43d Mon Sep 17 00:00:00 2001 From: sy-records <52o@qq52o.cn> Date: Sat, 28 Nov 2020 17:17:13 +0800 Subject: [PATCH 2/4] Add test --- test/integration/render.test.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/test/integration/render.test.js b/test/integration/render.test.js index 62f8b8ae0..12cb022b0 100644 --- a/test/integration/render.test.js +++ b/test/integration/render.test.js @@ -118,6 +118,16 @@ describe('render', function() { ); }); + test('loading', async function() { + const output = window.marked( + "![alt text](http://imageUrl ':loading=lazy')" + ); + + expect(output).toMatchInlineSnapshot( + `"

\\"alt

"` + ); + }); + test('id', async function() { const output = window.marked( "![alt text](http://imageUrl ':id=someCssID')" From 21506d78115df43c07960836efa11087faffaaec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=88=E5=94=81?= <52o@qq52o.cn> Date: Sun, 29 Nov 2020 16:40:30 +0800 Subject: [PATCH 3/4] Update helpers.md --- docs/helpers.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/helpers.md b/docs/helpers.md index ef0460c5d..a01006ed2 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -123,6 +123,8 @@ Only when you both set the `routerMode: 'history'` and `externalLinkTarget: '_se ### Lazy Loading +See the loading field of MDN's [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility) table for details of browser support. If the browser does not support lazy-loading then the attribute will be ignored and images will load immediately, as normal. + ```md ![logo](https://docsify.js.org/_media/icon.svg ':loading=lazy') ``` From 715f5f44b72d1557d88d578a116e0285f1ec4833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=88=E5=94=81?= <52o@qq52o.cn> Date: Sun, 29 Nov 2020 16:41:59 +0800 Subject: [PATCH 4/4] Update helpers.md --- docs/helpers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/helpers.md b/docs/helpers.md index a01006ed2..0b0a45c72 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -123,7 +123,7 @@ Only when you both set the `routerMode: 'history'` and `externalLinkTarget: '_se ### Lazy Loading -See the loading field of MDN's [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility) table for details of browser support. If the browser does not support lazy-loading then the attribute will be ignored and images will load immediately, as normal. +See the `loading` field of MDN's [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility) table for details of browser support. If the browser does not support lazy-loading then the attribute will be ignored and images will load immediately, as normal. ```md ![logo](https://docsify.js.org/_media/icon.svg ':loading=lazy')