在图像角事件的所有渲染 [英] Angular event on images all rendered

问题描述

要避免在一个缓慢的平台丑陋的屏幕重绘，我试图从任何指令或控制器时，所有图像渲染到检测事件（而不仅仅是加载）。我还没有设法找到一个合适的事件。

我想我可以等待'$ viewContentLoaded事件，然后触发$超时的任意时间后激活NG-节目，但是这显然哈克。有没有更好的解决办法？

  .directive（'myDirective'，['$窗口'，功能（$窗口）{    返回{        链接：功能（$范围，$元，$ ATTR）{            $范围。在（'$ viewContentLoaded'，函数（事件）{$
                警报（'$ viewContentLoaded！）
                $超时（函数（）{
                    // 展示内容
                }，1000）;            }）;
    }
}
]）;
 

解决方案

这是我用一个简化版本

假设你有角一起使用jQuery：

  app.directive（'imagesLoaded'，[功能（）{
  返回{
    限制：'A'，
    链接：功能（范围，元素，ATTRS）{
      变量$ IMG = element.find（IMG），
          数= $ img.length，
          I = 0;      如果（计数=== 0）回报;      $ img.one（加载，函数（）{
        我++;
        如果（I＆GT; =计数）{
          范围$广播（'images.loaded'）。
        }
      }）;      $ img.each（函数（）{
        如果（this.complete）{
          $（本）.load（）; //需要缓存图像
        }
      }）;
    }
  };
}]）;
 

To avoid ugly screen redraw on a slow platform, I'm attempting to detect an event when all images have rendered (rather than just loaded) from either a directive or a controller. I haven't managed to find an appropriate event.

I guess I could wait for the '$viewContentLoaded' event and then trigger a $timeout to activate ng-show after an arbitrary period of time but that's clearly hacky. Is there a better solution?

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

function ( $window ) {

    return {

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

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

            });
    }
}
]);

解决方案

This is a simplified version of what I use

Assuming you use jquery along with 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
        }
      });
    }
  };
}]);

这篇关于在图像角事件的所有渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！