perf: ⚡ 优化简易模式的懒加载顺序

hymbz · Jun 24, 2024 · 8d52510 · 8d52510
1 parent 1c7b4ea
commit 8d52510
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/helper/triggerLazyLoad.ts b/src/helper/triggerLazyLoad.ts
@@ -72,12 +72,14 @@ const tryCorrectUrl = (e: Element) => {
 const isLazyLoaded = (e: HTMLImageElement, oldSrc?: string) => {
   if (!e.src) return false;
   if (!e.offsetParent) return false;
+  // 有些网站会使用 svg 占位
+  if (e.src.startsWith('data:image/svg')) return false;
   if (oldSrc !== undefined && e.src !== oldSrc) return true;
   if (e.naturalWidth > 500 || e.naturalHeight > 500) return true;
   return false;
 };
 
-export const imgMap = new Map<HTMLImageElement, ImgData>();
+export const imgMap = new WeakMap<HTMLImageElement, ImgData>();
 // eslint-disable-next-line no-autofix/prefer-const
 let imgShowObserver: IntersectionObserver;
 
@@ -140,11 +142,14 @@ export const triggerLazyLoad = singleThreaded(
     // 过滤掉已经被触发过懒加载的图片
     const targetImgList = getAllImg()
       .filter(needTrigged)
-      .sort((a, b) => a.offsetTop - b.offsetTop);
-    targetImgList.forEach((e) => {
+      .sort(
+        (a, b) => a.getBoundingClientRect().y - b.getBoundingClientRect().y,
+      );
+
+    for (const e of targetImgList) {
       imgShowObserver.observe(e);
       if (!imgMap.has(e)) imgMap.set(e, createImgData(e.src));
-    });
+    }
 
     for (const e of targetImgList) {
       await wait(() => !scrollLock.enabled);

diff --git a/src/site/other.ts b/src/site/other.ts
@@ -129,7 +129,9 @@ import {
               ((e.naturalHeight > 500 && e.naturalWidth > 500) ||
                 isEleSelector(e, options.selector)),
           )
-          .sort((a, b) => a.offsetTop - b.offsetTop);
+          .sort(
+            (a, b) => a.getBoundingClientRect().y - b.getBoundingClientRect().y,
+          );
         return newImgList.length >= 2 && newImgList;
       });