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

问题与需求

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

相关文章

什么是设计模式一套被反复使用、多数人知晓的、经过分类编目...
单一职责原则定义(Single Responsibility Principle,SRP)...
动态代理和CGLib代理分不清吗,看看这篇文章,写的非常好,强...
适配器模式将一个类的接口转换成客户期望的另一个接口,使得...
策略模式定义了一系列算法族,并封装在类中,它们之间可以互...
设计模式讲的是如何编写可扩展、可维护、可读的高质量代码,...