关于页面依赖文件加载失败处理的一种“独特”设计

发布时间：2020-05-23 14:47:03 所属栏目：程序设计来源：互联网

导读：问题与需求：某个项目首页或者首屏在弱网络环境下，或者某些由于用户无意操作、浏览器自身当机等不可预估因素导致页面的某个主体css依赖文件没有加载，打开或者当机后再次页面的时候会页面整体“裸露”，考虑用户体验，我们会考虑给页面加一些提示，比如：

问题与需求：

某个项目首页或者首屏在弱网络环境下，或者某些由于用户无意操作、浏览器自身当机等不可预估因素导致页面的某个主体css依赖文件没有加载，打开或者当机后再次页面的时候会页面整体“裸露”，考虑用户体验，我们会考虑给页面加一些提示，比如：

方案设计：

页面头部有一个固定的提示层，内部提示文字等带有内联的样式：

内联的目的很简单：保证自己是正常的，不依赖核心样式来控制自己的展现。
比如代码如下：

<div style="font-size:12px;color:#f00;padding:10px;border:1px #E6D191 solid;background:#ffffd1;text-align:center">您好，您的页面出现异常，有可能是因为浏览器缓存引起的，您可以试着清理几次浏览器缓存（shift+ctrl+delete），然后强刷页面（ctrl+F5）。
</div>

问题来了：我到底咋判断页面核心文件没有加载完成呢？

当然方式很多，本文介绍的方式很。。。。。
注意上面的div没有设置display:none吧，说明是显示的，那我们就在核心文件里面加上一个样式规则:
给包裹它的div设置为display:none!!!!!!!!!!!!!!!!!!!!!!!!!

------------------ 原理很简单：核心css文件没有加载成功，导致异常提示层没有被应用diaplay:none的规则，它就乖乖显示了。。。。。。。。。。。。。反之，如果文件依赖加载成功，样式规则就应用了，提示层就乖乖隐藏了！！！！！！！！！！！！！

后话：

本案例考虑的是 css文件down掉！！！！！！！！！！！！！！！！！！！！！！

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!