CODEWITHSUNDEEP
angularjshaml
Mathivathan VL
Mathivathan VL

Reputation: 1

Display a placeholder image while image is loading from server

I am building a website on rails using haml and angularJs.The images are loading from server. I want a placeholder image to be displayed if the image is not loading or its taking too much time. Thank you in advance!

Upvotes: 0

Views: 1588

Answers (1)

Alex Doe
Alex Doe

Reputation: 934

So you will add a directive, which will get the original-src attribute and will replace the placeholder. As you can see it binds on the load event. Hope it helps.

Angular js:

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

your html

<img original-src="original.jpg" src="placeholder.jpg" />

Upvotes: 2

Related Questions