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

前端之家收集整理的这篇文章主要介绍了关于页面依赖文件加载失败处理的一种“独特”设计前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题与需求

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

猜你在找的设计模式相关文章