如何殺死AngularJS中的圖像閃光燈

我正嘗試使用AngularJS內置指令來實現一些簡單的JS效果，而無需編寫實際的js代碼。除了最初的閃光燈，它實際上工作得很好。如何殺死AngularJS中的圖像閃光燈

我知道對付的文字，人們應該使用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;當葉子，它變成假。

基於這個布爾模型值，將顯示一個或另一個圖像。

它的功能就像一個魅力，但我可以在開始時看到兩個圖像，閃爍！

如何處理這樣的事情呢？

來源

2013-10-15 Allen Nie

ngCloak可能會有幫助，但你也應該用NG-Src在實際的圖像源，這將防止您的網站的模式已經獲得了值之前加載圖像。另外，當使用ngCloak時，您可能需要將AngularJS源文件加載到html文件的頂部，因爲它可能會在它知道如何處理ng-cloak指令之前嘗試加載圖像。

來源

2013-10-15 01:23:31 TyndieRock

哎！這非常有幫助！因爲我也需要加載jQuery ......我實際上把jQuery和AngularJS放在最底部......我會將它們移到最上面。 –

如果ng-src和ng-cloak應用了ng-hide，是否會延遲加載圖像？ –

我相信圖像加載仍然會與ng-hide相同，ng-hide指令只是簡單地設置要顯示的元素的CSS顯示屬性：none！important – TyndieRock

應用ngCloak你dt應該爲你做的伎倆：http://docs.angularjs.org/api/ng.directive:ngCloak

下面是從文檔的例子。請注意，它被添加到兩個地方 - 指令以及一個類。該類僅用於IE7支持。

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

來源

2013-10-15 00:28:57 KayakDave

我將ng-cloack添加到我的'

'標記中。它不工作。我仍然可以看到圖像閃爍。 –

如何殺死AngularJS中的圖像閃光燈

回答

相關問題