javascript - ng-src : show a throbber before an image is loaded

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