顯示佔位符圖像，直到實際圖像加載內ng-repeat angularjs

我想顯示一個佔位符圖像，直到加載實際圖像。我已經使用ng-image-appear插件.Placeholder圖像不會顯示ng-repeat中的img元素，但它正在爲單個圖像元素工作。對此有何想法？顯示佔位符圖像，直到實際圖像加載內ng-repeat angularjs

的Javascript

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

HTML

<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>

來源

2017-03-16 Gopesh

只需使用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>

你可以在這裏看到一個工作示例https://jsfiddle.net/wLqzwvLh/2/這是在他們的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>

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

來源

2017-03-16 09:59:36 Martin

感謝您的答覆。它沒有按預期工作 – Gopesh

沒有看到你的代碼的其餘部分，我不知道是否有其他錯誤。我添加了一個可用的JSFiddle示例 – Martin

這將很好地工作：

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

，並在圖像標籤寫入此：

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

它會顯示「loading-image.gif」，直到實際圖像加載。

來源

2017-06-02 04:27:43

顯示佔位符圖像，直到實際圖像加載內ng-repeat angularjs

回答

相關問題