From 301dbb3802ae316d281c8305f03d085ad0cde84e Mon Sep 17 00:00:00 2001
From: zkqiang <zkqiang@126.com>
Date: Sun, 2 Jul 2023 12:45:52 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20=E4=BF=AE=E5=A4=8D=20fancyBox=20?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E6=97=B6=E6=9C=BA=20#870?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _config.yml                          |  2 +-
 layout/_partials/comments/twikoo.ejs |  8 +++++---
 layout/_partials/plugins/mermaid.ejs | 10 ++++++----
 source/js/utils.js                   | 14 ++++++++++++--
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/_config.yml b/_config.yml
index 07dede62..44703877 100644
--- 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
index 8f6ae04b..74c25d39 100644
--- 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
index 4aa7c3f7..ffd2860e 100644
--- 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
index 0b339901..d61bc264 100644
--- 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) {