coder-xiaomo
/
algorithm-visualization
mirror of https://gitee.com/coder-xiaomo/algorithm-visualization
1
0
Fork 0
Code Issues Projects Releases Wiki Activity GitHub Gitee

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

This commit is contained in:
程序员小墨 2022-05-22 18:54:45 +08:00
parent 54e5f2014e
commit 92b7ef448f
3 changed files with 34 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

BIN
src/assets/image/logo-normal-resize-compressed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

163
src/index.html
View File

@ -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>
<!-- 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 defer src="./assets/js/header.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> -->