ng-src：在加載圖像之前顯示跳動

我已經實現了一個界面，用戶可以通過單擊按鈕在一組圖像中循環。圖像URL被存儲在數組中，並且由動態angular.js取代：ng-src：在加載圖像之前顯示跳動

<img ng-src="{currentUrl}">

然而，對於連續的圖像的請求趨向於滯後由於顯示前一圖像位和圖像的變化並不明顯直到新的到達。

我想用一個throbber（動畫gif）替換圖像。我怎樣才能實現使用Angular.js？

來源

2013-07-03 mingos

爲什麼不只是使用？ – Andreas

@Andreas你知道你已經4年多了，不是嗎？ – mingos

您可以使用指令替換圖像，只要路徑發生變化並在加載時顯示圖像，就會用微調器代替圖像。

<img my-src="{currentUrl}"> 

    app.directive("mySrc", function() { 
    return { 
     link: function(scope, element, attrs) { 
     var img, loadImage; 
     img = null; 

     loadImage = function() { 

      element[0].src = "pathToSpinner"; 

      img = new Image(); 
      img.src = attrs.mySrc; 

      img.onload = function() { 
      element[0].src = attrs.mySrc; 
      }; 
     }; 

     scope.$watch((function() { 
      return attrs.mySrc; 
     }), function(newVal, oldVal) { 
      if (oldVal !== newVal) { 
      loadImage(); 
      } 
     }); 
     } 
    }; 
    });

此代碼大部分由coffeescript生成。

來源

2013-07-03 13:45:28

毆打......他的手錶有$ watch那麼 – leon

你的答案與sparkalow建議的一樣... –

不錯的一個！我試着寫了一個可以與ngSrc「交談」的指令，但未能達到我想要的。你的版本完全離開了圖片的ngSrc，我想這是我應該從一開始就採取的方法。謝謝！ – mingos

你可以用CSS做到這一點。將img標籤的背景設置爲動畫gif。背景將顯示，直到圖像加載。

img{ 
     background-image: url('throbber.gif') no-repeat; 
    }

來源

2013-07-03 13:25:07 sparkalow

就像我說過的，Angular.js顯示前一張圖片，直到新圖片加載完畢，所以除非第一張圖片還在加載，否則實際上並沒有顯示該圖片。 – mingos

我想你會需要一個額外的dom元素來顯示。當按鈕被點擊時用跳動器顯示元素，並在圖像加載時隱藏它。 – sparkalow

使用指令，下面的指令僅適用於單個圖像，但您會希望使用attr.$watch來檢測元素的imageIndex或src屬性的更改。

myModule.directive('imgLoader', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs, controllers) { 
     // get the parent and chuck bg image in 
     var parent = element.parent(); 
     parent.css('background-image', 'url("path-to-throbber.gif")'); 
     parent.css('background-repeat', 'no-repeat'); 
     // when it loads, hide the bg 
     element.load(function() { 
      parent.css('background-image',''); 
      parent.css('background-repeat',''); 
     }); 
    } 
    } 
});

你總是可以不使用ng-src屬性，但有另一種屬性看，然後簡單地將「src」屬性，當源圖像的變化。

希望這有助於

來源

2013-07-03 13:53:05 leon

我知道它很遲，但我這樣做

<img src="img/loader.gif" ng-src={{dynamicImageURL}}>

默認情況下，您的裝載機IMG將展示後來當dynamicImageURL得到解決，圖像將被角取代。

來源

2016-04-01 11:04:45

ng-src：在加載圖像之前顯示跳動

回答

相關問題