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

问题与需求

某个项目首页或者首屏在弱网络环境下,或者某些由于用户无意操作、浏览器自身当机等不可预估因素导致页面的某个主体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掉!!!!!!!!!!!!!!!!!!!!!!

相关文章

迭代器模式(Iterator)迭代器模式(Iterator)[Cursor]意图...
高性能IO模型浅析服务器端编程经常需要构造高性能的IO模型,...
策略模式(Strategy)策略模式(Strategy)[Policy]意图:定...
访问者模式(Visitor)访问者模式(Visitor)意图:表示一个...
命令模式(Command)命令模式(Command)[Action/Transactio...
生成器模式(Builder)生成器模式(Builder)意图:将一个对...