所有渲染图像上的角度事件

Question

为了避免在慢速平台上进行丑陋的屏幕重绘，我尝试在所有图像都从指令或控制器渲染（而不是仅仅加载）时检测事件。我还没有设法找到合适的活动。

我想我可以等待＆＃39; $ viewContentLoaded＆＃39;事件然后触发$ timeout以在任意时间段之后激活ng-show但这显然是hacky。有更好的解决方案吗？

.directive ( 'myDirective', ['$window',

function ( $window ) {

    return {

        link: function ( $scope, $element, $attr ) {

            $scope.$on('$viewContentLoaded', function(event){
                alert ('$viewContentLoaded!')
                $timeout(function () {
                    // show content
                },1000);

            });
    }
}
]);

Answer 1

这是我使用的简化版本

假设你使用jquery和angular：

app.directive('imagesLoaded',[function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var $img = element.find("img"),
          count = $img.length,
          i = 0;

      if( count === 0) return;

      $img.one("load", function(){
        i++;
        if (i >= count) {
          scope.$broadcast('images.loaded');
        }
      });

      $img.each(function(){
        if (this.complete) {
          $(this).load(); // needed for cached images
        }
      });
    }
  };
}]);