简化加载失败逻辑；logo图片压缩；删除index.html中部分无用代码

.gitignore

@@ -1,3 +1,4 @@
 .VSCodeCounter
 node_modules
-dist
+dist
+.ignore

src/index.html

@@ -5,7 +5,9 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>小墨 | 算法可视化 | Algorithm Visualization</title>
+    <title>算法可视化 | 小墨AlGO</title>
+
+    <meta name="description" content="小墨AlGO，可视化算法，让算法更简单！">
 
     <!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
     <link rel="stylesheet" href="./assets/css/index.css">
@@ -20,7 +22,10 @@
         <div id="sidebar" style="display: none;">
             <div id="control-div">
                 <div style="text-align: center;">
-                    <input id="array-input" style="width: 100%; text-align: center;" type="text" value="" />
+                    <label>
+                        请输入数组元素，以逗号分隔（中英文逗号均可）
+                        <input id="array-input" style="width: 100%; text-align: center;" type="text" value="" />
+                      </label>
                     <input id="getRandomBtn" type="button" value="随便来一个" />
                 </div>
                 <!-- 排序算法按钮 -->
@@ -31,140 +36,36 @@
                 <div id="console-logs"></div>
             </div>
         </div>
-        <!-- <div class="header">
-            <h1>小墨 | 算法可视化</h1>
-        </div>
-        <div class="content">
-            <div class="content-left">
-                <div class="content-left-header">
-                    <h2>算法可视化</h2>
-                </div>
-                <div class="content-left-body">
-                    <ul>
-                        <li><a href="">算法可视化</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="content-right">
-                <div class="content-right-header">
-                    <h2>算法可视化</h2>
-                </div>
-                <div class="content-right-body">
-                    <div class="content-right-body-header">
-                        <h3>算法可视化</h3>
-                    </div>
-                    <div class="content-right-body-body">
-                        <div id="container" class="container">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="footer">
-            <p>
-                <a href="">算法可视化</a>
-            </p>
-        </div> -->
     </div>
 
-    <script>
-        // CDN 资源加载失败时 fallback （使用本地js）
-        // refer: https://blog.csdn.net/weixin_44326389/article/details/104041963
-
-        function errorload(elem) { //cdn错误
-            if (elem.getAttribute('data-errorTimes') == 1) {
-                elem.onerror = null; // 执行完 onerror 事件后，置 οnerrοr = null 来清除 onerror 事件。
-                return;
-            }
-            elem.setAttribute('data-errorTimes', 1);
-            var _src = elem.getAttribute('local-src');
-            loadScript(_src, elem);
-        }
-
-        function loadScript(_src, prevEl) { //引入本地js
-            var _el = document.createElement('script');
-            _el.src = _src;
-            if (prevEl) {
-                prevEl.parentNode.insertBefore(_el, prevEl.nextSibling);
-            } else {
-                document.body.appendChild(_el);
-            }
-        }
-
-        /**
-         * 处理弱网情况下 d3, gsap 资源加载失败情况
-         */
-        // 自定义原地等待函数
-        const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
-
-        // 检查对象是否为 null ，以判断资源是否加载成功
-        function checkObjectExist(typeofObject, retryCount, scriptId, localUrl) {
-            if (typeofObject === "undefined") {
-                if (retryCount[scriptId] == null) {
-                    retryCount[scriptId] = 1
-                } else {
-                    retryCount[scriptId]++
-                }
-
-                // if (retryCount[scriptId] === 3) {
-                //     var scriptElement = document.getElementById(scriptId)
-                //     loadScript(localUrl, scriptElement)
-                //     if (scriptElement)
-                //         scriptElement.parentNode.removeChild(scriptElement)
-                // }
-
-                if (retryCount[scriptId] === 4)
-                    document.getElementById("container").innerHTML = "加载时间比预想的要长，若长时间无响应，请尝试刷新页面..."
-
-                if (retryCount[scriptId] === 8) {
-                    alert(`网页脚本未能成功加载，长时间未加载成功请刷新重试`)
-                }
-
-                if (retryCount[scriptId] > 10) {
-                    throw Error("多次尝试，但仍未成功，不再尝试")
-                }
-                console.log(scriptId)
-                console.error(`资源 [${scriptId}] 未能加载`, retryCount)
-                return false
-            }
-            return true
-        }
-
-        async function libLoadCheck() {
-            var retryCount = {}
-            // 如果没有成功加载，那么原地等待上方fallback加载本地js
-            while (!checkObjectExist(typeof (d3), retryCount, "script-d3", "./assets/lib/d3/7.4.4/d3.min.js"))
-                await sleep(1000)
-            while (!checkObjectExist(typeof (gsap), retryCount, "script-gsap", "./assets/lib/gsap/3.10.4/gsap.min.js"))
-                await sleep(1000)
-            loadScript("./assets/js/index.js")
-            console.log("基础资源加载成功")
-        }
-        setTimeout(libLoadCheck, 500)
-    </script>
-
-    <!-- D3.js refer: https://d3js.org/ -->
-    <script id="script-d3" src="https://cdn.staticfile.org/d3/7.4.4/d3.min.js"
-        local-src="./assets/lib/d3/7.4.4/d3.min.js" onerror="errorload(this);"></script>
-
-    <!-- GSAP refer: https://greensock.com/docs/v3/Installation -->
-    <script id="script-gsap" src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js"
-        local-src="./assets/lib/gsap/3.10.4/gsap.min.js" onerror="errorload(this);"></script>
-
     <!-- 导航栏 header -->
-    <script src="./assets/js/header.js"></script>
+    <script defer src="./assets/js/header.js"></script>
-
-    <!-- class -->
-    <script id="script-class" src="./assets/js/class.js"></script>
-
-    <!-- 排序算法 -->
-    <script src="./assets/js/algorithm/sort.js"></script>
-
-    <!-- 主script -->
-    <!-- <script src="./assets/js/index.js"></script> -->
 
     <!-- 深色模式 -->
-    <script src="./assets/js/darkmode.js"></script>
+    <script defer src="./assets/js/darkmode.js"></script>
+
+    <!-- D3.js refer: https://d3js.org/ -->
+    <script src="https://cdn.staticfile.org/d3/7.4.4/d3.min.js"></script>
+
+    <!-- GSAP refer: https://greensock.com/docs/v3/Installation -->
+    <script src="https://cdn.staticfile.org/gsap/3.10.4/gsap.min.js"></script>
+
+    <script>
+        function documentWriteScript(src) {
+            document.write('<' + 'script src="' + src + '"><' + '/script>')
+        }
+        !d3 && documentWriteScript("./assets/lib/d3/7.4.4/d3.min.js")
+        !gsap && documentWriteScript("./assets/lib/gsap/3.10.4/gsap.min.js")
+    </script>
+
+    <!-- class -->
+    <script defer id="script-class" src="./assets/js/class.js"></script>
+
+    <!-- 排序算法 -->
+    <script defer src="./assets/js/algorithm/sort.js"></script>
+
+    <!-- 主script -->
+    <script defer src="./assets/js/index.js"></script>
 
     <!-- 算法测试 -->
     <!-- <script src="./assets/js/algorithm/test.js"></script> -->