博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS页面加载闪烁解决方案
阅读量:6231 次
发布时间:2019-06-21

本文共 638 字,大约阅读时间需要 2 分钟。

hot3.png

    AngularJS这个大杀器使得实现SPA(Single Page App)变得异常的简单,其双向绑定让页面内容的重新渲染无需编写大量JS代码,无需构造DOM字符串丑陋的,作为需要快速迭代,提高用户体现的下一代互联网应用,AngularJS可以说已经成为必选技术之一。

    然而,AngularJS同样存在Javascript的一个通病,其标签占位符需要在DOM加载完和javascript加载完后才会触发绑定和渲染工作,这导致在页面加载时会出现闪烁(先显示标签,再被渲染掉),尤其在网速不理想的情况下,严重影响用户体验。

    AngularJS提供了两种方案来解决这个问题:

1、使用ng-bind或ng-bing-template属性而不是{
{field}}占位符,由于DOM属性不可视,初始化时显示默认空白。
2、使用ng-cloak属性或设置ng-cloak样式。其原理是AngularJS在初始化时在head里增加了一个ng-cloak的样式,该样式设置DOM的display:none,即默认不显示。

    然而这两个方案都不理想ng-bind或ng-bing-template无法实现复杂的内容表示,而现代浏览器仍然可能在ng-cloak样式被插入head之前显示页面了。

   最终方案:样式表中增加一个ng-cloak,内容同AngularJS动态创建的一致,在head中静态加载

转载于:https://my.oschina.net/u/699015/blog/411678

你可能感兴趣的文章
提升控件绘制速度
查看>>
封装自用的脚本ajax.js
查看>>
SQL左、右、内、全连接
查看>>
Ehcache 整合Spring 使用页面、对象缓存
查看>>
哈哈哈哈哈哈哈
查看>>
wordpress学习四: 一个简单的自定义主题
查看>>
04文件操作1
查看>>
Asp.net mvc 3 - JSONResult return array
查看>>
Spring MVC - log4j 配置
查看>>
c# WF 第6节 MDI窗体
查看>>
杂七杂八
查看>>
RabbitMQ 消息确认机制
查看>>
简单的新浪微博OAuth认证实现
查看>>
Mybatis表关联一对多
查看>>
Spring_Aop基于配置文件
查看>>
R cannot be resolved的几种可能 R not generated
查看>>
随机快速排序
查看>>
linux下创建用户、用户组及赋予sudoer权限
查看>>
简述Hibernate配置连接池
查看>>
路径1
查看>>