实现页面加载等待动画很简单吗？

bawn 发布于2019-08-19 17:34 / 2928人阅读

摘要：二基于上面的测试，实现页面加载动画理想的方式是什么先定好目标尽快让用户看到变化，不要让用户以为页面已经不响应，再逐步加载内容。页面上方加载动画的定义和页面元素，提供异步加载页面元素和文件的。

在手机上打开页面时，经常会因为网络不好导致需要较长的加载时间，如果这段时间内只是显示一个“白板”，用户体验非常不好。通常的解决方案就是完整打开页面前给用户展示一个加载动画，让用户能够看到页面还活着呢。本以为是个很简单的活，真做起来才发现【有不少学问】！

一、首先要搞清楚的问题是，为什么加载过程中会出现”白板“，下面用Chrome开发者工具的Timeline分析面板做了几个实验。

1、不加载资源文件

顺序：加载、解析、渲染、绘制

2、加载CSS

加载外部的CSS文件会阻止渲染，不论link的标签放在什么位置上。
顺序：加载、解析、加载（阻塞了渲染）、渲染、绘制

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

顺序：加载、解析、渲染（？）、加载（阻塞）、解析（JS执行完多了个解析）、渲染、绘制

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

顺序：加载、解析、渲染、绘制、加载、解析、渲染、绘制

4、在
加载CSS中断了页面的渲染和绘制

5、在
加载CSS没有中断。我理解这是因为JS是单线程的，放在timeout里创建的link去排队，浏览器就先不管它了。

二、基于上面的测试，实现页面加载动画理想的方式是什么？

先定好目标：尽快让用户看到变化，不要让用户以为页面已经不响应，再逐步加载内容。
最快的方式就是做一个空的页面，不加载任何外部资源（包括：CSS和JS）。页面上方加载动画的CSS定义和页面元素，提供异步加载页面元素、CSS和JS文件的JS。通过JS加载各类资源成功后关闭动画效果，清除不必要的内容。

这样就来个新问题，如何实现动态加载问题？

外部文件的动态加载问题很多文章都深入分析过了，简单说，就是用异步加载，但是要考虑到各个JS文件的依赖关系问题。综合比较了一下，决定requirejs实现动态加载。因为最近一直用angular，所以下面的代码是require.js+angular。

HTML

loader.js
因为angular不是AMD，所以用shim引用成angular全局变量

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

app.js
如果真的要动态添加样式，建议先获得数据，把数据展现出来，在加载样式，这样就能让用户今早看到变化。

define(["angular"], function(angular) {
    "use strict";
    angular.module("app", []).controller("ctrl", ["$scope", "$timeout", function($scope, $timeout) {
        $scope.data = [];
        // 模拟长时间获得数据
        $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

#content{color:red;}

三、还可以做什么？

可以考虑页面的布局也动态加载，这样用户可以先看见页面的框架，然后再获取数据填到框架中。但是还没有想到成熟的解决方案。

云服务器 GPU云服务器加载等待动画实现加载动画 java实现页面加载 html等待加载模板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78644.html

实现页面加载等待动画很简单吗？

摘要：二基于上面的测试，实现页面加载动画理想的方式是什么先定好目标尽快让用户看到变化，不要让用户以为页面已经不响应，再逐步加载内容。页面上方加载动画的定义和页面元素，提供异步加载页面元素和文件的。在手机上打开页面时，经常会因为网络不好导致需要较长的加载时间，如果这段时间内只是显示一个白板，用户体验非常不好。通常的解决方案就是完整打开页面前给用户展示一个加载动画，让用户能够看到页面还活着呢。...

qpal 2019-08-01 15:02 评论0 收藏0
校招社招必备核心前端面试问题与详细解答

摘要：本文总结了前端老司机经常问题的一些问题并结合个人总结给出了比较详尽的答案。网易阿里腾讯校招社招必备知识点。此外还有网络线程，定时器任务线程，文件系统处理线程等等。线程核心是引擎。主线程和工作线程之间的通知机制叫做事件循环。 showImg(https://segmentfault.com/img/bVbu4aB?w=300&h=208); 本文总结了前端老司机经常问题的一些问题并结合个...

jonh_felix 2019-08-23 18:40 评论0 收藏0
校招社招必备核心前端面试问题与详细解答

摘要：本文总结了前端老司机经常问题的一些问题并结合个人总结给出了比较详尽的答案。网易阿里腾讯校招社招必备知识点。此外还有网络线程，定时器任务线程，文件系统处理线程等等。线程核心是引擎。主线程和工作线程之间的通知机制叫做事件循环。 showImg(https://segmentfault.com/img/bVbu4aB?w=300&h=208); 本文总结了前端老司机经常问题的一些问题并结合个...

Rango 2019-08-30 11:25 评论0 收藏0
制作60fps的高性能动画

摘要：因为异步的关系中的回调函数并非立即执行，而是需要加入等待队列中。通知绘制位图到屏幕上而就只需要绘制图层了，所以硬件加速的性能无疑更好。写在前面说到web的高性能动画，这部分内容其实已经是老生常谈的了，不过其中还是有不少比较新的而且非常实用的内容可以和大家分享一下。读完这篇文章后相信大家都会对动画渲染的机制以及制作60fps动画的关键要素有足够的理解，以后遇上了动画相关的问题也可以很...

617035918 2019-08-23 11:41 评论0 收藏0
校招社招必备核心前端面试问题与详细解答

摘要：本文总结了前端老司机经常问题的一些问题并结合个人总结给出了比较详尽的答案。网易阿里腾讯校招社招必备知识点。此外还有网络线程，定时器任务线程，文件系统处理线程等等。线程核心是引擎。主线程和工作线程之间的通知机制叫做事件循环。 showImg(https://segmentfault.com/img/bVbu4aB?w=300&h=208); 本文总结了前端老司机经常问题的一些问题并结合个...

DevTalking 2019-08-02 15:31 评论0 收藏0