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

Question

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

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

低分辨率图像将首先可见，并在下载后替换为高分辨率图像。如何才能做到这一点？是否可以编辑 img.src 属性，或者是否应该创建其他东西(例如具有背景的包装 div 或另一个临时 div)？

Answer 1

您可能想要创建一个指令，我实际上将雇用作为属性，因此默认情况下它以 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" />