fix: 修复懒加载时占位图没有展示的问题

Tencent · Sep 6, 2022 · 3dd20fe · 3dd20fe
1 parent a35ce1b
commit 3dd20fe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/src/Previewer.js b/src/Previewer.js
@@ -646,6 +646,7 @@ export default class Previewer {
   }
 
   update(html) {
+    // 更新时保留图片懒加载逻辑
     const newHtml = this.lazyLoadImg.changeSrc2DataSrc(html);
     if (!this.isPreviewerHidden()) {
       // 标记当前正在更新预览区域，锁定同步滚动功能
@@ -654,9 +655,7 @@ export default class Previewer {
       // 预览区未隐藏时，直接更新
       const tmpDiv = document.createElement('div');
       const domContainer = this.getDomContainer();
-      // 把最新内容放进临时div的时候，为了防止图片加载，会强制把图片的src改成data-src
-      const enableLazyLoadImage = this.options.lazyLoadImg.noLoadImgNum > -1;
-      tmpDiv.innerHTML = this.lazyLoadImg.changeSrc2DataSrc(html, enableLazyLoadImage);
+      tmpDiv.innerHTML = newHtml;
       const newHtmlList = this.$getSignData(tmpDiv);
       const oldHtmlList = this.$getSignData(domContainer);
 

diff --git a/src/utils/lazyLoadImg.js b/src/utils/lazyLoadImg.js
@@ -294,25 +294,25 @@ export default class LazyLoadImg {
     const { noLoadImgNum } = this.options;
     let currentNoLoadImgNum = 0;
     return content.replace(/<img ([^>]*?)src="([^"]+)"([^>]*?)>/g, (match, m1, src, m3) => {
-      // 如果已经替换过data-src了，或者没有src属性，则不替换
-      if (/data-src="/.test(match) || !/ src="/.test(match)) {
+      // 如果已经替换过data-src了，或者没有src属性，或者关闭了懒加载功能，则不替换
+      if (/data-src="/.test(match) || !/ src="/.test(match) || noLoadImgNum < 0) {
         return match;
       }
       if (focus === false) {
-        // 如果src已经加载过，则不替换
-        if (this.isLoaded(src)) {
-          return match;
-        }
         // 前noLoadImgNum张图片不替换
         currentNoLoadImgNum += 1;
-        if (currentNoLoadImgNum < noLoadImgNum || noLoadImgNum < 0) {
+        if (currentNoLoadImgNum < noLoadImgNum) {
           return match;
         }
-        // 如果配置了loadingImgPath，则替换src为loadingImgPath
-        if (loadingImgPath) {
-          return `<img ${m1}src="${loadingImgPath}" data-src="${src}"${m3}>`;
+        // 如果src已经加载过，则不替换
+        if (this.isLoaded(src)) {
+          return match;
         }
       }
+      // 如果配置了loadingImgPath，则替换src为loadingImgPath
+      if (loadingImgPath) {
+        return `<img ${m1}src="${loadingImgPath}" data-src="${src}"${m3}>`;
+      }
       return `<img ${m1}data-src="${src}"${m3}>`;
     });
   }