只有当图片完全下载并在AngularJS中渲染后才会显示

Display an image only when it is fully downloaded and rendered in AngularJS

本文关键字：AngularJS 显示 下载      更新时间：2023-09-26

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

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

我需要使用jQuery吗?我想做尽可能多的没有任何额外的库(也许我可以使用AngularJS的内置jqlite或其他东西)

这样做可能会奏效。

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

如果你想避免使用jQuery，可以使用onload属性:

img.onload = function() {
  // image is loaded
}
相关文章：