前言
默认的 index.html 显示的 Loading 太简陋了. 而且没有加载进度条.
所以做了一个.
代码地址 : https://github.com/BlazorPlus/BlazorDemoWasmLoading
![[Asp.Net Core] Blazor WebAssembly - 改造 Loading... 界面_第1张图片](http://img.e-com-net.com/image/info8/b525155f3e22402d963b9233748854c0.jpg)
只需要改 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>BlazorDemoWasmLoadingtitle>
<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 = "";
}
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">Reloada>
<a class="dismiss">a>
div>
<script src="_framework/blazor.webassembly.js">script>
<script>navigator.serviceWorker.register('service-worker.js');script>
body>
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>BlazorDemoWasmLoadingtitle>
<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 = "";
}
}
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">Reloada>
<a class="dismiss">a>
div>
<script src="_framework/blazor.webassembly.js">script>
<script>navigator.serviceWorker.register('service-worker.js');script>
body>
html>
更新一个更平滑的实现. 目前足够平滑了.