實(shí)現(xiàn)頁面加載等待動畫很簡單嗎？

bawn 發(fā)布于2019-08-19 17:34 / 2967人閱讀

摘要：二基于上面的測試，實(shí)現(xiàn)頁面加載動畫理想的方式是什么先定好目標(biāo)盡快讓用戶看到變化，不要讓用戶以為頁面已經(jīng)不響應(yīng)，再逐步加載內(nèi)容。頁面上方加載動畫的定義和頁面元素，提供異步加載頁面元素和文件的。

在手機(jī)上打開頁面時，經(jīng)常會因?yàn)榫W(wǎng)絡(luò)不好導(dǎo)致需要較長的加載時間，如果這段時間內(nèi)只是顯示一個“白板”，用戶體驗(yàn)非常不好。通常的解決方案就是完整打開頁面前給用戶展示一個加載動畫，讓用戶能夠看到頁面還活著呢。本以為是個很簡單的活，真做起來才發(fā)現(xiàn)【有不少學(xué)問】！

一、首先要搞清楚的問題是，為什么加載過程中會出現(xiàn)”白板“，下面用Chrome開發(fā)者工具的Timeline分析面板做了幾個實(shí)驗(yàn)。

1、不加載資源文件

順序：加載、解析、渲染、繪制

2、加載CSS

加載外部的CSS文件會阻止渲染，不論link的標(biāo)簽放在什么位置上。
順序：加載、解析、加載（阻塞了渲染）、渲染、繪制

3、加載JS
a、在body前加載外部的JS文件會阻止渲染

順序：加載、解析、渲染（？）、加載（阻塞）、解析（JS執(zhí)行完多了個解析）、渲染、繪制

b、在body后加載外部的JS文件不會阻止渲染

順序：加載、解析、渲染、繪制、加載、解析、渲染、繪制

4、在
加載CSS中斷了頁面的渲染和繪制

5、在
加載CSS沒有中斷。我理解這是因?yàn)镴S是單線程的，放在timeout里創(chuàng)建的link去排隊(duì)，瀏覽器就先不管它了。

二、基于上面的測試，實(shí)現(xiàn)頁面加載動畫理想的方式是什么？

先定好目標(biāo)：盡快讓用戶看到變化，不要讓用戶以為頁面已經(jīng)不響應(yīng)，再逐步加載內(nèi)容。
最快的方式就是做一個空的頁面，不加載任何外部資源（包括：CSS和JS）。頁面上方加載動畫的CSS定義和頁面元素，提供異步加載頁面元素、CSS和JS文件的JS。通過JS加載各類資源成功后關(guān)閉動畫效果，清除不必要的內(nèi)容。

這樣就來個新問題，如何實(shí)現(xiàn)動態(tài)加載問題？

外部文件的動態(tài)加載問題很多文章都深入分析過了，簡單說，就是用異步加載，但是要考慮到各個JS文件的依賴關(guān)系問題。綜合比較了一下，決定requirejs實(shí)現(xiàn)動態(tài)加載。因?yàn)樽罱恢庇胊ngular，所以下面的代碼是require.js+angular。

HTML

loader.js
因?yàn)閍ngular不是AMD，所以用shim引用成angular全局變量

require.config({
    paths: {
        "angular": "/static/js/angular.min",
    },
    shim: {
        "angular": {
            exports: "angular"
        },
    },
    deps: ["/test/loading/app.js?_=10"]
});

app.js
如果真的要動態(tài)添加樣式，建議先獲得數(shù)據(jù)，把數(shù)據(jù)展現(xiàn)出來，在加載樣式，這樣就能讓用戶今早看到變化。

define(["angular"], function(angular) {
    "use strict";
    angular.module("app", []).controller("ctrl", ["$scope", "$timeout", function($scope, $timeout) {
        $scope.data = [];
        // 模擬長時間獲得數(shù)據(jù)
        $timeout(function() {
            for (var i = 0; i < 100; i++) {
                $scope.data.push("data:" + i);
            }
            // 模擬長時間獲得樣式
            $timeout(function() {
                var link, head;
                link = document.createElement("link");
                link.href = "/test/loading/app.css?_=" + (new Date()).getTime();
                link.rel = "stylesheet";
                link.onload = function() {
                    var eleLoading, eleStyle;
                    eleLoading = document.querySelector(".loading");
                    eleLoading.parentNode.removeChild(eleLoading);
                    eleStyle = document.querySelector("#loadingStyle");
                    eleStyle.parentNode.removeChild(eleStyle);
                };
                head = document.querySelector("head");
                head.appendChild(link);
            }, 2000);
        }, 2000);
    }]);
});

app.css