在加载并渲染ng-repeat中生成的所有img之后回调

时间:2018-01-23 08:48:47

标签: jquery angularjs image

我有:

<div class ='container'>
  <div class  ='subcontainer'>
    <div class="item" ng-repeat="item in items">
      <img class="grid-img" data-ng-src="<?php echo base_url();?>
      {{item.image_path}}menu.png"/> 
    </div>
  </div>
</div>

我想要一个回调函数来通知子容器类中的所有图像是否被完全加载和渲染。我尝试了太多的插件,但它们不适合angularjs标签。我还尝试了一个自定义指令来加载每个图像...一些图像被加载但渲染太慢。有人请帮帮我。提前谢谢。

1 个答案:

答案 0 :(得分:0)

快速搜索显示了一个名为onFinishRender的有趣指令:

.directive('onFinishRender',['$timeout', '$parse', function ($timeout, $parse) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          scope.$emit('ngRepeatFinished');
          if(!!attr.onFinishRender){
            $parse(attr.onFinishRender)(scope);
          }
        });
      }
    }
  }
}])

他的网站展示了如何设置,尝试并查看它是否适合您。