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

我已经实现了一个界面，用户可以通过单击按钮在一组图像中循环。图像URL被存储在数组中，并且由动态angular.js取代：ng-src：在加载图像之前显示跳动

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

然而，对于连续的图像的请求趋向于滞后由于显示前一图像位和图像的变化并不明显直到新的到达。

我想用一个throbber（动画gif）替换图像。我怎样才能实现使用Angular.js？

来源

2013-07-03 mingos

为什么不只是使用？ – Andreas

@Andreas你知道你已经4年多了，不是吗？ – mingos

您可以使用指令替换图像，只要路径发生变化并在加载时显示图像，就会用微调器代替图像。

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

来源

2013-07-03 13:45:28

殴打......他的手表有$ watch那么 – leon

你的答案与sparkalow建议的一样... –

不错的一个！我试着写了一个可以与ngSrc“交谈”的指令，但未能达到我想要的。你的版本完全离开了图片的ngSrc，我想这是我应该从一开始就采取的方法。谢谢！ – mingos

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

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

来源

2013-07-03 13:25:07 sparkalow

就像我说过的，Angular.js显示前一张图片，直到新图片加载完毕，所以除非第一张图片还在加载，否则实际上并没有显示该图片。 – mingos

我想你会需要一个额外的dom元素来显示。当按钮被点击时用跳动器显示元素，并在图像加载时隐藏它。 – sparkalow

使用指令，下面的指令仅适用于单个图像，但您会希望使用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-03 13:53:05 leon

我知道它很迟，但我这样做

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

默认情况下，您的装载机IMG将展示后来当dynamicImageURL得到解决，图像将被角取代。

来源

2016-04-01 11:04:45

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

回答

相关问题