从服务器加载图像时显示占位符图像

Question

我正在使用haml和angularJs在rails上构建一个网站。图像是从服务器加载的。如果图像没有加载或占用太多时间，我想要显示占位符图像。提前谢谢！

Answer 1

因此，您将添加一个指令，该指令将获取original-src属性并将替换占位符。正如您所看到的，它会在load事件上绑定。希望它有所帮助。

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);
        });
    }
  };
});

你的HTML

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