关于页面依赖文件加载失败处理的一种“独特”设计
发布时间：2020-12-13 19:59:22 所属栏目：百科 来源：网络整理
导读：问题与需求 ： 某个项目首页或者首屏在弱网络环境下，或者某些由于用户无意操作、浏览器自身当机等不可预估因素导致页面的某个主体css依赖文件没有加载，打开或者当机后再次页面的时候会页面整体“裸露”， 考虑用户体验，我们会考虑给页面加一些提示 ，比如
|
问题与需求： 某个项目首页或者首屏在弱网络环境下，或者某些由于用户无意操作、浏览器自身当机等不可预估因素导致页面的某个主体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掉！！！！！！！！！！！！！！！！！！！！！！
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |