标签：动画 Loading 文件 EasyCVR GIF 加载

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。