标签：cal position 页面 z-index ica 数据 表达 dex fun
场景：
一个非常复杂的表单页面，页面有5个标签，第五个标签中又有5个标签，也就是说一共有9个标签，每个标签中都有一个表单，表单之间相互关联、所有表单项（包括复合的），有80多个数据。全部东西写在一个html内。当电脑机器比较慢的时候，ng没启动完全时，会有短暂的页面混乱，表达式，花括号等，解决这个问题使用ngcloak，但混乱就变成了一片空白，这也不是我想要的。打算使用第三方的弹窗来暂时顶替这片空白，但是没什么好办法可以通过js来知道ng是否渲染完。唯一知道的是渲染完之后ngcloak类会被去除。我就根据这个特点来写了一个纯粹基于css的遮蔽层。
任何使用了ng的页面，只要引入下面的js文件，就会有遮蔽层了
/** * Created by liwenjun on 2017/9/5. * * ngCloak过渡层 */ (function(){ var html = ‘<style> #lloading{ z-index: 9999999999999; top: 0; left: 0; position: fixed; transition: opacity 1s ease,width .1s ease 1s,height .1s ease 1s; opacity: 0; width: 0; height: 0; } #lloading[ng-cloak]{ width: 100%; height: 100%; opacity: 1; top: 0; left: 0; display: table !important; text-align: center; } #lloading .bg{ position: absolute; background-color: #333; opacity: .3; height: 100%; width: 100%; } #lloading .icon{ vertical-align:middle; display:table-cell; } </style> <div id="lloading" ng-cloak> <div class="bg"></div> <div class="icon">加载中...</div> </div>‘ ; document.write(html); })();
标签：cal position 页面 z-index ica 数据 表达 dex fun
原文地址：http://www.cnblogs.com/hellohello/p/7638318.html
