javascript - 仅当图像完全下载并在 AngularJS 中呈现时才显示图像

Question

我正在使用 AngularJS 来显示图像。图像的高度和宽度是动态的，具体取决于浏览器的高度和宽度。如何仅在准备好显示图像时才显示包含图像的 div？

<div id="container">
  <img ng-src="{{media_list.cur}}" />
</div>

我需要为此使用 jQuery 吗？我想在没有任何额外库的情况下尽可能多地做(也许我可以使用 AngularJS 的内置 jqlite 或其他东西)

Answer 1

这样的事情可能会奏效。

app.directive('img', function() {
  return {
    restrict: 'E',
    link: function(scope, el, attrs) {
      el.addClass('hide');

      el.on('load', function() {
        el.removeClass('hide');
      });
    }
  }
});