實(shí)現(xiàn)頁(yè)面加載等待動(dòng)畫(huà)很簡(jiǎn)單嗎？

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

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

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

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

1、不加載資源文件

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

2、加載CSS

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

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

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

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

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

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

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

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

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

這樣就來(lái)個(gè)新問(wèn)題，如何實(shí)現(xiàn)動(dòng)態(tài)加載問(wèn)題？

外部文件的動(dòng)態(tài)加載問(wèn)題很多文章都深入分析過(guò)了，簡(jiǎn)單說(shuō)，就是用異步加載，但是要考慮到各個(gè)JS文件的依賴(lài)關(guān)系問(wèn)題。綜合比較了一下，決定requirejs實(shí)現(xiàn)動(dòng)態(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
如果真的要?jiǎng)討B(tài)添加樣式，建議先獲得數(shù)據(jù)，把數(shù)據(jù)展現(xiàn)出來(lái)，在加載樣式，這樣就能讓用戶(hù)今早看到變化。

define(["angular"], function(angular) {
    "use strict";
    angular.module("app", []).controller("ctrl", ["$scope", "$timeout", function($scope, $timeout) {
        $scope.data = [];
        // 模擬長(zhǎng)時(shí)間獲得數(shù)據(jù)
        $timeout(function() {
            for (var i = 0; i < 100; i++) {
                $scope.data.push("data:" + i);
            }
            // 模擬長(zhǎng)時(shí)間獲得樣式
            $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