在下载真实图像之前如何显示占位符图像？

Question

这个想法是在下载真正的高分辨率图像之前显示图像的低分辨率版本，最好使用img标签。

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

低分辨率图像将首先显示，下载后将替换为高分辨率图像。如何才能做到这一点？是否可以编辑img.src属性，还是应该创建其他内容（例如具有背景的包装div或另一个临时div）？

Answer 1

您可能想要创建一个指令，实际上我将把hires作为属性，因此默认情况下它以绝杀开头。

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