Javascript ng src：在加载图像之前显示一个跳动器

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

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

但是，对连续图像的请求往往会有一点延迟，并且图像更改并不明显，因为在新图像到达之前会显示上一个图像

---

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

您可以使用CSS实现这一点。将img标记的背景设置为动画gif。在加载图像之前，背景将一直显示

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

  <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();
          }
        });
      }
    };
  });

---

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

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

  <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();
          }
        });
      }
    };
  });

应用程序指令（“mySrc”，函数（）{
返回{
链接：函数（范围、元素、属性）{
var-img，loadImage；
img=null；
loadImage=函数（）{
元素[0]。src=“pathToSpinner”；
img=新图像（）；
img.src=attrs.mySrc；
img.onload=函数（）{
元素[0]。src=attrs.mySrc；
};
};
范围$watch（（函数（）{
返回attrs.mySrc；
})，函数（newVal，oldVal）{
if（oldVal！==newVal）{
loadImage（）；
}
});
}
};
});

使用指令，下面的指令仅适用于单个图像，但您需要使用

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','');
        });
     }
  }
});

您可以始终不使用

ngsrc

属性，而是使用另一个属性来监视，然后在源图像更改时简单地设置“src”属性

---

希望这能有所帮助

我知道已经很晚了，但我喜欢这样做

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

---

默认情况下，加载程序img将显示，稍后解析DynamicImage URL时，图像将替换为angular。

如我所说，angular.js将显示上一个图像，直到加载新图像为止，因此，除了第一个图像仍在加载时，throbber实际上永远不会显示。我认为您需要一个额外的dom元素来显示。当按钮被点击时，用跳动器显示元素，当图像被加载时，隐藏元素。。。还有他的手表，真漂亮！我试着写一个指令来“与”ngSrc对话，但没能达到我的目的。你的版本将ngSrc完全排除在外，我想这是我从一开始就应该采取的方法。非常感谢。也许你必须在link函数的末尾调用loadImage（）来加载初始图像我已经纠正了这个非常棒的答案，只是做了一些小的修改

==>

为什么不直接使用？@Andreas你意识到自己晚了四年多，是吗？