EasyCVR页面添加Loading加载效果的实现过程

EasyCVR支持多协议、多类型设备的接入，协议方面，可支持国标GB28181、RTMP、RTSP/Onvif、海康SDK、大华SDK、海康Ehome等。在视频输出上，可分发多格式的视频流，包括RTMP、RTSP、WebSoket-FLV、HTTP-FLV、HLS、WebRTC等，覆盖全平台、全终端，包括PC、手机端、APP端、电子大屏等等。

我们在开发过程中发现，在EasyCVR平台中，当加载后台时，因静态文件加载太多或网络质量差而导致长时间白屏事件：

从上图可以看出，在EasyCVR加载时，左上角一直在转圈，下方一堆待处理的文件，页面一直白屏，影响用户体验。

于是针对该情况，我们进行了优化：在加载静态文件的同时，显示一个动画或者GIF。

关于在加载静态文件的同时显示为动画还是GIF，团队内部也进行了技术上的交流讨论。GIF也属于资源的一部分且文件较大会造成一丢丢时间的白屏，所以决定由前端通过css实现一个Loading动画。

动画样式代码参考如下：

动画样式如下：

完成动画后，需要在静态文件加载完毕时关闭Loading：

完成上述主要代码，此功能完成。

EasyCVR具备很强的视频转码、播放、录像、回看、级联等能力，在很多场景中均有落地项目应用，如智慧工地、智慧安防、智慧工厂、智慧园区等。EasyCVR视频融合云平台兼容性强、开放度高、灵活拓展、部署轻松的特点，使其成为安防市场主流的视频能力层服务平台，感兴趣的用户可以前往演示平台进行体验或部署测试。

标签：动画,Loading,文件,EasyCVR,GIF,加载
来源： https://www.cnblogs.com/easycvr/p/16517953.html