7

ユーザーがボタンをクリックして一連の画像を循環できるインターフェイスを実装しました。画像 URL は配列に格納され、angular.js によって動的に置き換えられます。

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

ただし、連続する画像の要求は少し遅れる傾向があり、新しい画像が到着するまで前の画像が表示されるため、画像の変更は明らかではありません。

画像をスロバー（アニメーションGIF）に差し替えたいです。Angular.js を使用してそれを達成するにはどうすればよいですか?

4

4 に答える 4

22

パスが変更されるたびにイメージをスピナーに置き換え、ロード時にイメージを表示するディレクティブを使用してこれを行うことができます。

  <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();
          }
        });
      }
    };
  });
于 2013-07-03T13:45:28.060 に答える
9

私はそれがかなり遅いことを知っていますが、私はそれが好きです

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

デフォルトでは、ローダー img が表示され、後で dynamicImageURL が解決されると、画像は angular に置き換えられます。

于 2016-04-01T11:04:45.107 に答える
2

CSSでこれを行うことができます。img タグの背景をアニメーション gif に設定します。画像が読み込まれるまで背景が表示されます。

    img{
      background-image: url('throbber.gif') no-repeat;
    }
于 2013-07-03T13:25:07.350 に答える