🐛 修复 fancyBox 执行时机 #870

fluid-dev · Jul 2, 2023 · 301dbb3 · 301dbb3
1 parent a5113d4
commit 301dbb3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/_config.yml b/_config.yml
@@ -843,7 +843,7 @@ remark42:
   components: ['embed']
 
 # Twikoo
-# 基于腾讯云开发
+# 支持腾讯云、Vercel、Railway 等多种平台部署
 # Based on Tencent CloudBase
 # See: https://twikoo.js.org
 twikoo:

diff --git a/layout/_partials/comments/twikoo.ejs b/layout/_partials/comments/twikoo.ejs
@@ -9,9 +9,11 @@
             el: '#twikoo',
             path: '<%= theme.twikoo.path %>',
             onCommentLoaded: function() {
-              var imgSelector = '#twikoo .tk-content img:not(.tk-owo-emotion)';
-              Fluid.plugins.imageCaption(imgSelector);
-              Fluid.plugins.fancyBox(imgSelector);
+              Fluid.utils.listenDOMLoaded(function() {
+                var imgSelector = '#twikoo .tk-content img:not(.tk-owo-emotion)';
+                Fluid.plugins.imageCaption(imgSelector);
+                Fluid.plugins.fancyBox(imgSelector);
+              });
             }
           }
         )

diff --git a/layout/_partials/plugins/mermaid.ejs b/layout/_partials/plugins/mermaid.ejs
@@ -2,10 +2,12 @@
   Fluid.utils.createScript('<%= url_join(theme.static_prefix.mermaid, 'mermaid.min.js') %>', function() {
     mermaid.initialize(<%- JSON.stringify(theme.post.mermaid.options || {}) %>);
 
-    Fluid.events.registerRefreshCallback(function() {
-      if ('mermaid' in window) {
-        mermaid.init();
-      }
+    Fluid.utils.listenDOMLoaded(function() {
+      Fluid.events.registerRefreshCallback(function() {
+        if ('mermaid' in window) {
+          mermaid.init();
+        }
+      });
     });
   });
 </script>
diff --git a/source/js/utils.js b/source/js/utils.js
@@ -15,6 +15,16 @@ Fluid.utils = {
     window.removeEventListener('scroll', callback);
   },
 
+  listenDOMLoaded(callback) {
+    if (document.readyState !== 'loading') {
+      callback();
+    } else {
+      document.addEventListener('DOMContentLoaded', function () {
+        callback();
+      });
+    }
+  },
+
   scrollToElement: function(target, offset) {
     var of = jQuery(target).offset();
     if (of) {
@@ -46,7 +56,7 @@ Fluid.utils = {
     offsetFactor = offsetFactor && offsetFactor >= 0 ? offsetFactor : 0;
 
     function waitInViewport(element) {
-      document.addEventListener('DOMContentLoaded', function() {
+      Fluid.utils.listenDOMLoaded(function() {
         if (Fluid.utils.elementVisible(element, offsetFactor)) {
           callback();
           return;
@@ -100,7 +110,7 @@ Fluid.utils = {
       });
       mo.observe(document, { childList: true, subtree: true });
     } else {
-      document.addEventListener('DOMContentLoaded', function() {
+      Fluid.utils.listenDOMLoaded(function() {
         var waitLoop = function() {
           var ele = document.querySelector(selector);
           if (ele) {