如何使用AngularJs避免屏幕闪烁？

Question

如何使用AngularJs避免屏幕闪烁？

tus*_*lar 4 javascript angularjs angularjs-directive angularjs-scope

我是棱角分明的新人.我使用AngularJS来开发前端.但是在初始级别我遇到了在页面加载时闪烁一些内容的问题.

我的问题是,当我在localhost中运行我的应用程序时,有时它会在屏幕上显示数据绑定表达式,或者它在浏览器上显示一些疯狂的输出.ng-clock虽然我的问题没有解决,但我使用过(由angularjs docs建议).

我的html文件太小了,虽然闪烁,但没有做很多事情.请注意我的脚本标签位于底部.请给我一些想法,以防止AngularJS中的这个王者.

的index.html

    <!DOCTYPE html>
    <html lang="en" ng-app="app">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Sample App</title>
        <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="styles/cover.css">
        <link rel="stylesheet" href="styles/sidebar.css">
        <style type="text/css"></style>
 <script src="node_modules/jquery/dist/jquery.min.js"></script>
        <script>
            window.jQuery || document.write('<script src="node_modules/jquery/dist/jquery.min.js"><\/script>')
        </script>
        <script src="node_modules/angular/angular.min.js"></script>
    </head>

    <body ng-controller="mainCtrl" ng-cloak>
        <div class="site-wrapper">
            <div class="site-wrapper-inner">
                  <div class="masthead clearfix">
                      <div class="inner">
                          <div ng-include src="'views/header.html'"></div>
                      </div>
                  </div>
                  <div class="inner" ng-clock>
                        <div ng-if="hasSidebar" ng-include src="'views/sidebar.html'" id="sidebar" ng-cloak></div>
                        <div id="view" ng-view></div>
                  </div>
                  <div class="mastfoot">
                      <div class="inner">
                          <p>Cover template</p>
                      </div>
                  </div>
            </div>
        </div>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="node_modules/angular-route/angular-route.min.js"></script>

        <script src="controllers/app.js"></script>
    </body>

    </html>

Run Code Online (Sandbox Code Playgroud)

了header.html

<h3 class="masthead-brand">Cover</h3>
<nav>
    <ul class="nav masthead-nav">
        <li class="active"><a ng-href="#/home">Home</a></li>
        <li><a ng-href="#/features">Features</a></li>
        <li><a ng-href="#/contact">Contact</a></li>
        <li><a ng-href="#/dashboard">Dashboard</a></li>
    </ul>
</nav>

Run Code Online (Sandbox Code Playgroud)

sidebar.html

<ul class="list-unstyled">
    <li><a href="#">link1</a></li>
    <li><a href="#">link2</a></li>
    <li><a href="#">link3</a></li>
    <li><a href="#">link4</a></li>
    <li><a href="#">link5</a></li>
    <li><a href="#">link6</a></li>
</ul>

Run Code Online (Sandbox Code Playgroud)

dashboard.html

<div id="content">
  <h1>Dashboard</h1>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jim*_*Aho 5

这可能是因为您正在页面底部加载AngularJS脚本.

请注意,当您指定ng-cloak指令时,Angular本身会隐藏元素.

由于您的浏览器渲染页面然后加载Angular,因此时间差可能导致"闪烁".尝试将脚本标记放在页面顶部.

摘自AngularJS关于ngCloak的文档:

为了获得最佳结果,必须在html文档的head部分中加载angular.js脚本; 或者,上面的css规则必须包含在应用程序的外部样式表中.

归档时间：	9 年，8 月前
查看次数：	9295 次
最近记录：	9 年，8 月前