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 回答
0

使用指令，下面的指令仅适用于单个图像，但您需要使用它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-03T13:53:05.567 回答