Question

我希望在加载实际图像之前显示占位符图像。我使用过ng-image-appear插件。在ng-repeat中，img元素没有显示.Placeholder图像，但它适用于单个图像元素。有什么想法吗？

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

Answer 1

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

这将完美地运作：

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

显示占位符图像，直到实际图像加载到ng-repeat angularjs中

2 个答案: