[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>

更新一個更平滑的實作. 目前足夠平滑了.

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/27064.html

標籤：.NET Core

上一篇：[Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在歡迎頁面里, 預先加載wasm所需的檔案

下一篇：Azure 無服務器 Function 函式計算服務 dotnet core 3.1 創建和部署入門