実際の画像がロードされるまでプレースホルダ画像を表示します。ng-repeat angularjs

Question

実際の画像がロードされるまでプレースホルダ画像を表示します。私はng-image-appearプラグインを使用しました.Placeholderイメージはng-repeatの中のimg要素には表示されませんが、単一のイメージ要素のために働いています。

Javascriptを

$scope.images =[ 
{ 
    id:1, 
    src:"http://placehold.it/350x150" 
}, 
{ 
    id:1, 
    src:"http://placehold.it/300x150" 
} 
] 

<div class="image-container" ng-repeat="image in images"> 
<img class="img-rounded" src="{{image.src}}" ng-src="{{image.src}}" ng-image-appear responsive transition-duration="1s" animation="fillIn" animation-duration="1s" placeholder easing="ease-out" /> 
</div> 

Answer 1

HTMLはちょうどあなたがここにの実施例を参照することができNG-SRCを使用してsrc="{{image.src}}"

<div class="image-container" ng-repeat="image in images"> 
    <img class="img-rounded" ng-src="{{image.src}}" ng-image-appear responsive transition-duration="1s" animation="fillIn" animation-duration="1s" placeholder easing="ease-out" /> 
</div> 

を削除

  app.directive('dummyimage', function() { 
       return { 
       restrict: 'A', 
       scope: { dummyimage: '@' }, 
       link: function(scope, element, attrs) { 
        element.one('load', function() { 
         element.attr('src', scope.dummyimage); 
        }); 
       } 
       }; 
      }); 

と画像タグ書き込みでこれを：彼らのNGリピート例ではhttp://arunmichaeldsouza.github.io/ng-image-appear/examples/ng-repeat.html

HTML

<div ng-app="myApp" ng-controller="appCtrl" class="container"> 
    <div class="row"> 
     <div class="col-sm-3" ng-repeat="url in images"> 
      <img 
       ng-src="{{url}}" 
       class="img-responsive" 
       ng-image-appear 
       responsive 
       animation="bounceIn" 
       animation-duration="1s" 
      /> 
     </div> 
    </div> 
</div> 

JS

var myApp = angular.module('myApp', ['ngImageAppear']); 
myApp.controller('appCtrl', ['$scope', function($scope) { 
    $scope.images = [ 
     'http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Full-HD-Wallpapers-1080p-1.jpg', 
     'http://www.onlyhdpic.com/images/Collections/hd-pics-photos-nature-fish-tree.jpg', 
     'http://www.planwallpaper.com/static/images/6982679-1080p-wallpapers-hd.jpg', 
     'https://newevolutiondesigns.com/images/freebies/hd-wallpaper-40.jpg' 
    ]; 
}]); 

Answer 2

これは完璧に動作しますに基づいている：

<img dummyimage="loading-image.gif" src="{{realImage}}" /> 

実画像が読み込まれるまで「loading-image.gif」と表示されます。