Question

我已经实现了一个界面，用户可以通过单击按钮循环浏览一组图像。图像URL存储在一个数组中，并由angular.js动态替换：

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

然而，连续图像的请求往往会稍微滞后，因为显示前一个图像直到新图像到达，图像变化不明显。

我想用throbber（动画gif）替换图像。如何使用Angular.js实现这一目标？

Answer 1

您可以使用一个指令来执行此操作，该指令会在路径更改时使用微调器替换您的图像，并在加载时显示图像。

  <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生成。

Answer 2

我知道它很晚但我喜欢

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

默认情况下，您的加载器img将显示，稍后当dynamicImageURL被解析时，图像将被angular替换。

Answer 3

你可以用CSS做到这一点。将img标记的背景设置为动画gif。将显示背景，直到图像被加载。

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

Answer 4

使用指令，下面的指令仅适用于单个图像，但您需要使用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”属性。

希望这有帮助

ng-src：在加载图像之前显示跳动

4 个答案: