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

 

问题与需求：

 

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