✨ fix #314

CHANGELOG.md

@@ -57,10 +57,11 @@
 
 * [open issues](https://github.com/Vanessa219/vditor/issues)
 
-### v3.1.12 / 2020-04-1x
+### v3.1.13 / 2020-04-1x
 
-### v3.1.11 / 2020-04-16
+### v3.1.12 / 2020-04-17
 
+* [314](https://github.com/Vanessa219/vditor/issues/314) 添加图片懒加载设置 `引入特性`
 * [319](https://github.com/Vanessa219/vditor/issues/319) add ctrl+shift+e button to toolbar for smartphone `改进功能`
 * [312](https://github.com/Vanessa219/vditor/issues/312) 支持块级元素上下移动 `引入特性`
 * [318](https://github.com/Vanessa219/vditor/issues/318) 工具栏和编辑器区域对齐 `改进功能`
@@ -97,10 +98,11 @@
   * 添加 `options.upload.setHeaders: { [key: string]: string }`
   * 为 `options.toolbar` 添加 outdent，indent, outline
   * 添加静态方法 `outlineRender`
-  * IPreviewOptions 添加 `after`
   * insert line 默认快捷键由 `⌘-⇧-D` 修改为 `⌘-⇧-H`，添加下移 `⌘-⇧-D`、上移 `⌘-⇧-U` 快捷键，移除上传快捷键
   * 为 `options.toolbar` 添加 outdent，indent, outline, insert-after, insert-before
   * options.preview.maxWidth 默认值改为 800
+  * IPreviewOptions 添加 `after`，`lazyLoadImage`
+  * 添加 lazyLoadImageRender 静态方法
 
 ### v3.0.12 / 2020-04-06
 

src/method.ts

@@ -9,6 +9,7 @@ import {mermaidRender} from "./ts/markdown/mermaidRender";
 import {outlineRender} from "./ts/markdown/outlineRender";
 import {md2html, previewRender} from "./ts/markdown/previewRender";
 import {speechRender} from "./ts/markdown/speechRender";
+import {lazyLoadImageRender} from "./ts/markdown/lazyLoadImageRender";
 class Vditor {
 
     /** 为 element 中的代码块添加复制按钮 */
@@ -31,6 +32,8 @@ class Vditor {
     public static mediaRender = mediaRender;
     /** 对选中的文字进行阅读 */
     public static speechRender = speechRender;
+    /** 对图片进行懒加载 */
+    public static lazyLoadImageRender = lazyLoadImageRender;
     /** Markdown 文本转换为 HTML，该方法需使用[异步编程](https://hacpai.com/article/1546828434083?r=Vaness) */
     public static md2html = md2html;
     /** 页面 Markdown 文章渲染 */

src/ts/markdown/lazyLoadImageRender.ts

@@ -0,0 +1,56 @@
+declare global {
+    interface Window {
+        vditorImageIntersectionObserver: IntersectionObserver;
+    }
+}
+
+export const lazyLoadImageRender = (element: (HTMLElement | Document) = document) => {
+    const loadImg = (it: HTMLImageElement) => {
+        const testImage = document.createElement("img");
+        testImage.src = it.getAttribute("data-src");
+        testImage.addEventListener("load", () => {
+            if (!it.getAttribute("style") && !it.getAttribute("class") &&
+                !it.getAttribute("width") && !it.getAttribute("height")) {
+                if (testImage.naturalHeight > testImage.naturalWidth &&
+                    testImage.naturalWidth / testImage.naturalHeight <
+                    document.querySelector(".vditor-reset").clientWidth / (window.innerHeight - 40) &&
+                    testImage.naturalHeight > (window.innerHeight - 40)) {
+                    it.style.height = (window.innerHeight - 40) + "px";
+                }
+            }
+
+            it.src = testImage.src;
+        });
+        it.removeAttribute("data-src");
+    };
+
+    if (!("IntersectionObserver" in window)) {
+        element.querySelectorAll("img").forEach((imgElement: HTMLImageElement) => {
+            if (imgElement.getAttribute("data-src")) {
+                loadImg(imgElement);
+            }
+        });
+        return false;
+    }
+
+    if (window.vditorImageIntersectionObserver) {
+        window.vditorImageIntersectionObserver.disconnect();
+        element.querySelectorAll("img").forEach((imgElement) => {
+            window.vditorImageIntersectionObserver.observe(imgElement);
+        });
+    } else {
+        window.vditorImageIntersectionObserver = new IntersectionObserver((entries) => {
+            entries.forEach((entrie: IntersectionObserverEntry & { target: HTMLImageElement }) => {
+                if ((typeof entrie.isIntersecting === "undefined"
+                    ? entrie.intersectionRatio !== 0
+                    : entrie.isIntersecting)
+                    && entrie.target.getAttribute("data-src")) {
+                    loadImg(entrie.target);
+                }
+            });
+        });
+        element.querySelectorAll("img").forEach((imgElement) => {
+            window.vditorImageIntersectionObserver.observe(imgElement);
+        });
+    }
+};

src/ts/markdown/previewRender.ts

@@ -11,6 +11,7 @@ import {mediaRender} from "./mediaRender";
 import {mermaidRender} from "./mermaidRender";
 import {setLute} from "./setLute";
 import {speechRender} from "./speechRender";
+import {lazyLoadImageRender} from "./lazyLoadImageRender";
 
 const mergeOptions = (options?: IPreviewOptions) => {
     const defaultOption = {
@@ -72,6 +73,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
             footnotes: mergedOptions.markdown.footnotes,
             headingAnchor: mergedOptions.anchor,
             inlineMathDigit: mergedOptions.math.inlineDigit,
+            lazyLoadImage: mergedOptions.lazyLoadImage,
             setext: mergedOptions.markdown.setext,
             toc: mergedOptions.markdown.toc,
         });
@@ -115,4 +117,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     if (mergedOptions.after) {
         mergedOptions.after();
     }
+    if (mergedOptions.lazyLoadImage) {
+        lazyLoadImageRender(previewElement);
+    }
 };

src/ts/markdown/setLute.ts

@@ -11,5 +11,8 @@ export const setLute = (options: ILuteOptions) => {
     lute.SetFixTermTypo(options.fixTermTypo);
     lute.SetVditorCodeBlockPreview(options.codeBlockPreview);
     lute.SetSetext(options.setext);
+    if (options.lazyLoadImage) {
+        lute.SetImageLazyLoading(options.lazyLoadImage);
+    }
     return lute;
 };

types/index.d.ts

@@ -12,14 +12,15 @@ interface ILuteRender {
                 Type: number,
             },
         }
-    },               entering: boolean) => [string, number];
+    }, entering: boolean) => [string, number];
 }
 
 interface ILuteOptions extends IMarkdownConfig {
     emojis: { [key: string]: string };
     emojiSite: string;
     headingAnchor: boolean;
     inlineMathDigit: boolean;
+    lazyLoadImage?: string;
 }
 
 interface ILute {
@@ -37,6 +38,8 @@ interface ILute {
 
     SetHeadingAnchor(enable: boolean): void;
 
+    SetImageLazyLoading(imagePath: string): void;
+
     SetInlineMathAllowDigitAfterOpenMarker(enable: boolean): void;
 
     SetToC(enable: boolean): void;
@@ -260,6 +263,7 @@ interface IPreviewOptions {
     theme?: "classic" | "dark";
     customEmoji?: { [key: string]: string };
     lang?: (keyof II18nLang);
+    lazyLoadImage?: string;
     emojiPath?: string;
     hljs?: IHljs;
     speech?: {