[Asp.Net Core] Blazor WebAssembly - 改造 Loading... 界面
前言
默认的 index.html 显示的 Loading 太简陋了. 而且没有加载进度条.
所以做了一个.
代码地址 : https://github.com/BlazorPlus/BlazorDemoWasmLoading
只需要改 index. html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>BlazorDemoWasmLoading</title> <base href="/" /> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="manifest.json" rel="manifest" /> <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /> </head> <body> <app> <div style="position:fixed;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;"> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='80px' height='80px' viewBox='0 0 40 40' enable-background='new 0 0 40 40' xml:space='preserve'> <path opacity='0.2' fill='#000' d='M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z'></path> <path fill='#000' d='M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z' transform='rotate(228 20 20)'> <animateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.5s' repeatCount='indefinite'></animateTransform> </path> </svg> <div style="height:30px"> Loading.. </div> <div id="progressbar" style="display: inline-block; width: 260px; height: 12px; border: solid 1px gray; border-radius:6px; position: relative;"></div> </div> </app> <script type="text/javascript"> var preLoadStart = 0; var preLoadCount = 0; var preLoadError = 0; var preLoadFinish = 0; function preLoadResource(dllname) { preLoadCount++; var xh = new XMLHttpRequest(); xh.open("GET", dllname, true); xh.onload = function () { preLoadFinish++; if (xh.status != 200) preLoadError++; console.log(preLoadFinish + "/" + preLoadCount, dllname); var progressbar = document.getElementById("progressbar"); if (progressbar) { progressbar.innerHTML = "<span style='position:absolute;left:0;background-color:darkgreen;height:10px;border-radius:5px;width:" + (progressbar.offsetWidth * preLoadFinish / preLoadCount) + "px'></span>"; } if (preLoadFinish == preLoadCount) { var span = new Date().getTime() - preLoadStart; console.log("All Done In " + span + " ms , " + preLoadError + " errors"); } } xh.send(""); } function preLoadAll() { preLoadStart = new Date().getTime(); var xh = new XMLHttpRequest(); xh.open("GET", "_framework/blazor.boot.json", true); xh.onload = function () { var res = JSON.parse(xh.responseText); console.log(res); for (var p in res.resources.assembly) preLoadResource("_framework/_bin/" + p); for (var p in res.resources.runtime) preLoadResource("_framework/wasm/" + p); preLoadResource("_framework/blazor.webassembly.js"); } xh.send(""); } preLoadAll(); </script> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> <script src="_framework/blazor.webassembly.js"></script> <script>navigator.serviceWorker.register('service-worker.js');</script> </body> </html>
挺简单的. <app> 里的东西在 wasm 加载完毕后就会被清楚啦.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>BlazorDemoWasmLoading</title> <base href="/" /> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="manifest.json" rel="manifest" /> <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" /> </head> <body> <app> <div style="position:fixed;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;"> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='80px' height='80px' viewBox='0 0 40 40' enable-background='new 0 0 40 40' xml:space='preserve'> <path opacity='0.2' fill='#000' d='M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634 c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z'></path> <path fill='#000' d='M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z' transform='rotate(228 20 20)'> <animateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.5s' repeatCount='indefinite'></animateTransform> </path> </svg> <div style="height:30px"> Loading.. </div> <div id="progressbar" style="display: inline-block; width: 260px; height: 12px; border: solid 1px gray; border-radius:6px; position: relative;"></div> </div> </app> <script type="text/javascript"> new function () { var preLoadTime = 0; var preLoadCount = 0; var preLoadError = 0; var preLoadFinish = 0; var preLoadPercent = 0; var preLoadStart = 0; var preLoadTotal = 0; var preLoadLoaded = 0; var preLoadCLength = 0; var preLoadSampleLoaded = 0; var preLoadSampleCLength = 0; function preLoadUpdateUI() { var progressbar = document.getElementById("progressbar"); if (progressbar) { var p = preLoadFinish / preLoadCount; if (preLoadTotal) { p = preLoadLoaded / preLoadTotal; } else if (preLoadSampleLoaded) { var ratio = preLoadSampleCLength / preLoadSampleLoaded; var p2 = Math.min(1, (preLoadLoaded * ratio / preLoadCLength) * (preLoadStart / preLoadCount)); p = (p + p2) / 2; } preLoadPercent = Math.max(preLoadPercent, p); progressbar.innerHTML = "<span style='position:absolute;left:0;background-color:darkgreen;height:10px;border-radius:5px;width:" + (progressbar.offsetWidth * preLoadPercent) + "px'></span>"; } } function preLoadResource(dllname) { preLoadCount++; var xh = new XMLHttpRequest(); xh.open("GET", dllname, true); var loaded = 0; var total = 0; var clength = 0; xh.onprogress = function (e) { if (!e.loaded) return; if (loaded == 0) { preLoadStart++; clength = parseInt(xh.getResponseHeader("Content-Length")); total = e.total; preLoadCLength += clength; preLoadTotal += total; } preLoadLoaded += e.loaded - loaded; loaded = e.loaded; preLoadUpdateUI(); } xh.onload = function () { if (loaded && clength) { preLoadSampleLoaded += loaded; preLoadSampleCLength += clength; } preLoadFinish++; if (xh.status != 200) preLoadError++; //console.log(preLoadFinish + "/" + preLoadCount, clength / loaded, dllname); if (preLoadFinish == preLoadCount) { var span = new Date().getTime() - preLoadTime; console.log("All Done In " + span + " ms , " + preLoadError + " errors"); } } xh.send(""); } function preLoadAll() { preLoadTime = new Date().getTime(); var xh = new XMLHttpRequest(); xh.open("GET", "_framework/blazor.boot.json", true); xh.onload = function () { var res = JSON.parse(xh.responseText); console.log(res); var arr = []; function moveFront(part) { for (var i = 0; i < arr.length; i++) { if (arr[i].indexOf(part) != -1) { arr.unshift(arr.splice(i, 1)[0]); break; } } } arr.push("_framework/blazor.webassembly.js"); for (var p in res.resources.runtime) arr.push("_framework/wasm/" + p); for (var p in res.resources.assembly) arr.push("_framework/_bin/" + p); moveFront("System.Core.dll"); moveFront("System.Data.dll"); moveFront("System.dll"); moveFront("System.Xml.dll"); moveFront("mscorlib"); moveFront("dotnet.wasm"); arr.forEach(preLoadResource); //console.log(arr); } xh.send(""); } preLoadAll(); } </script> <div id="blazor-error-ui"> An unhandled error has occurred. <a href="" class="reload">Reload</a> <a class="dismiss">🗙</a> </div> <script src="_framework/blazor.webassembly.js"></script> <script>navigator.serviceWorker.register('service-worker.js');</script> </body> </html>
更新一个更平滑的实现. 目前足够平滑了.
