问题与需求:
某个项目首页或者首屏在弱网络环境下,或者某些由于用户无意操作、浏览器自身当机等不可预估因素导致页面的某个主体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!!!!!!!!!!!!!!!!!!!!!!!!!
------------------ 原理很简单:
核心css文件没有加载成功,导致异常提示层没有被应用diaplay:none的规则,它就乖乖显示了。。。。。。。。。。。。。反之,如果文件依赖加载成功,样式规则就应用了,提示层就乖乖隐藏了!!!!!!!!!!!!!
后话:
本案例考虑的是
css文件down掉!!!!!!!!!!!!!!!!!!!!!!
原文链接:https://www.f2er.com/javaschema/286512.html