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

Answer 2

相信如果你想避免使用jQuery，你可以使用onload属性：

img.onload = function() {
  // image is loaded
}

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

2 个答案: