How to show a placeholder-image before the real image is downloaded?

Question

The idea is to show a low-res version of an image before the real high-resolution image has been downloaded, ideally using an img tag.

<img lowres="http://localhost/low-res-image.jpg" ng-src="http://localhost/low-res-image.jpg">

Low-res image would be visible first, and be replaced with high-res image after it has been downloaded. How can this be done? Is it possible to edit img.src attribute, or should something else (e.g. a wrapper div with background, or another temporary div) be created?

Answer 1

You'd probably want to create a directive, I'd actually have hires as the attribute, so that by default it starts with lores.

JS:

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

HTML:

<img hires="http://localhost/hi-res-image.jpg" src="http://localhost/low-res-image.jpg" />

Answer 2

Because ng-src is going to replace whatever is in src why not use both?

<img src="img/placeholder.jpg" ng-src="{{actualone.img}} "  height="150px " width="300px ">

Use normal src for your placeholder. It will get replaced one the image for ng-src is ready.