perf: 懒加载评论

theme-shoka-x · Feb 9, 2024 · e4315ef · e4315ef
1 parent c680fc6
commit e4315ef
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 30 deletions.
diff --git a/scripts/generaters/script.ts b/scripts/generaters/script.ts
@@ -59,7 +59,7 @@ hexo.extend.generator.register('script', function (locals) {
     twikoo: {
       envId: theme.twikoo.envId,
       region: theme.twikoo.region
-    },
+    }
   }
 
   if (config?.algolia) {

diff --git a/source/js/_app/pjax/domInit.ts b/source/js/_app/pjax/domInit.ts
@@ -92,24 +92,6 @@ export default function domInit () {
       root: null,
       threshold: 0.2
     }).observe(document.querySelector('.with-love'))
-
-    // 懒加载背景图
-    const lazyBgEls = $dom.all('[data-background-image]')
-    const lazyBg = new IntersectionObserver(function (entries,observer) {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          const el = entry.target as HTMLElement
-          el.style.backgroundImage = `url(${el.getAttribute('data-background-image')})`
-          observer.unobserve(el)
-        }
-      })
-    }, {
-      root: null,
-      threshold: 0.2
-    })
-    lazyBgEls.forEach(el => {
-      lazyBg.observe(el)
-    })
   }
   createIntersectionObserver()
 }
diff --git a/source/js/_app/pjax/refresh.ts b/source/js/_app/pjax/refresh.ts
@@ -7,7 +7,7 @@ import { resizeHandle } from '../globals/handles'
 import {
   CONFIG,
   loadCat,
-  menuToggle, pjax,
+  menuToggle,
   setLocalHash, setLocalUrl, setOriginTitle,
   sideBar,
   toolPlayer
@@ -40,6 +40,25 @@ export const siteRefresh = (reload) => {
   vendorJs('copy_tex')
   vendorCss('mermaid')
 
+  // 懒加载背景图
+  console.log('lazyBg')
+  const lazyBg = new IntersectionObserver(function (entries, observer) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const el = entry.target as HTMLElement
+        el.style.backgroundImage = `url("${el.getAttribute('data-background-image')}")`
+        el.removeAttribute('data-background-image')
+        observer.unobserve(el)
+      }
+    })
+  }, {
+    root: null,
+    threshold: 0.2
+  })
+  document.querySelectorAll('[data-background-image]').forEach(el => {
+    lazyBg.observe(el)
+  })
+
   if (reload !== 1) {
     $dom.each('script[data-pjax]', pjaxScript)
   }
@@ -53,21 +72,44 @@ export const siteRefresh = (reload) => {
   sideBarTab()
   sidebarTOC()
 
-  import('../page/post').then(({ postBeauty }) => {
-    postBeauty()
-  })
+  if (LOCAL.ispost) {
+    import('../page/post').then(({ postBeauty }) => {
+      postBeauty()
+    })
+
+    const comment = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (__shokax_waline__) {
+            import('../components/comments').then(({ walinePageview, walineComment }) => {
+              walinePageview()
+              walineComment()
+            })
+          }
+          if (__shokax_twikoo__) {
+            import('../components/tcomments').then(({ twikooComment }) => {
+              twikooComment()
+            })
+          }
+          comment.disconnect()
+        }
+      })
+    }, {
+      root: null,
+      threshold: 0.2
+    })
+
+    comment.observe($dom('#copyright'))
+  }
 
-  if (__shokax_waline__ && LOCAL.ispost) {
-    import('../components/comments').then(async ({ walineComment, walinePageview, walineRecentComments }) => {
-      walineComment()
-      walinePageview()
+  if (__shokax_waline__) {
+    import('../components/comments').then(async ({ walinePageview, walineRecentComments }) => {
       await walineRecentComments()
     })
   }
 
-  if (__shokax_twikoo__ && LOCAL.ispost) {
-    import('../components/tcomments').then(async ({ twikooComment, twikooRecentComments }) => {
-      twikooComment()
+  if (__shokax_twikoo__) {
+    import('../components/tcomments').then(async ({ twikooRecentComments }) => {
       await twikooRecentComments()
     })
   }