如何在AngularJS中杀死图像闪光灯

Question

我正在尝试使用AngularJS内置指令来实现一些简单的JS效果，而无需编写实际的js代码。它实际上工作得很好，除了最初的闪光灯。

我知道要处理文本，人们应该使用ng-bind而不是{{}}

但是你如何处理像ng-if这样的指令？

这是我的代码：

<li ng-if="!magazines.resolved"> <!-- add "&& isOwner" when done -->
        <dl>
          <dt ng-model="changeToActivation" ng-init="changeToActivation=false" ng-mouseover="changeToActivation=true" ng-mouseleave="changeToActivation=false"><img ng-if="!changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine.jpg');?>">
          <img ng-click="addMagazine()" id="activated" ng-if="changeToActivation"  ng-src="<?php echo base_url('public/images/system_icons/add_magazine_activated.jpg');?>"></dt>
          <dd class="magazineName">Create <br> A new magazine</dd>
          <dd class="publishDate">Now!</dd>
        </dl>
      </li>

我知道它有点难以阅读，但它很容易。<dt></dt>标签上定义了模型。如果鼠标悬停在此标记上，则模型值变为 true;当离开时，它变得虚假。

基于此布尔模型值，将显示一个或另一个图像。

它就像一个魅力，但我可以在一开始看到两个图像，闪烁！

那么如何处理这样的事情呢？

Answer 1

ngCloak可能会有所帮助，但您还应该将ng-src用于实际的图像源，这将阻止您的网站在模型收到值之前加载图像。 此外，在使用ngCloak时，您可能需要在html文件的顶部加载AngularJS源代码，因为它可能会在知道如何处理ng-cloak指令之前尝试加载图像。

Answer 2

将 ngCloak 应用于您dt应该为您解决问题：http://docs.angularjs.org/api/ng.directive:ngCloak

下面是文档中的示例。 请注意，它是在两个地方添加的 - 指令和类。 该类仅适用于 IE7 支持。

 <div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>