CODEWITHSUNDEEP
javascripthtmlangularjsimage
Gopesh
Gopesh

Reputation: 3950

Show placeholder image until actual image is loaded inside ng-repeat angularjs

I want to show a placeholder image until the actual image is loaded. I have used ng-image-appear plugin .Placeholder image is not showing for img elements inside ng-repeat but it is working for a single image element.Any ideas on this?

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>

Upvotes: 0

Views: 1472

Answers (2)

Sangwin Gawande
Sangwin Gawande

Reputation: 8166

This will work perfectly : 

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

and in image tag write this :

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

It will show "loading-image.gif" until real image is loaded.

Upvotes: 0

Martin
Martin

Reputation: 2427

Just use ng-src and delete 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>

You can see a working example here https://jsfiddle.net/wLqzwvLh/2/ which is based on in their ng-repeat example 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'
    ];
}]);

Upvotes: 2

Related Questions