添加指令是否会增加ng-repeat性能?

时间:2015-06-23 15:15:28

标签: javascript angularjs performance

Angular JS版本:1.2.26

为了减少渲染时间,我将图像和标题绑定移动到一些自定义指令中。我做了一些阅读,大多数似乎都指向使用指令或指令和绑定的混合来提高渲染性能。

已经实现了Lazyloading,我也将研究使用bind一次。

关于如何在n个项目列表中增加ng-repeat性能的任何想法变得更大?

原始代码:

<div ng-repeat='mediaitem in mediaitems track by $index' on-finish-render="ngRepeatFinished">
    <button data-ng-click="onItemClicked(mediaitem)" id="{{$index}}" save-scroll > 
        <img img-preload  width="100%" ng-src='{{mediaitem.img0 || mediaitem.img1 }}' />
        <div align="center" class="title" ng-bind="mediaitem.titlefull" > </div>
    </button>
</div>

修订代码:

<div ng-repeat='mediaitem in mediaitems track by $index' on-finish-render="ngRepeatFinished">
   <button  data-ng-click="onItemClicked(mediaitem)" id="{{$index}}" save-scroll > 
      <img  img-preload  width="100%" set-image />
      <div align="center" class="title" set-title> </div> 
  </button>
</div>

指令: .....

  .directive('setTitle',function(){
        return{
            restrict: 'A',
            link : function(scope,element,attrs){
                element.html(scope.mediaitem.titlefull);
            }
        };
    })
    .directive('setImage',function(){
        return{
            restrict: 'A',
            link : function(scope,element,attrs){
                var imgsrc = scope.mediaitem.img1;
                if(!imgsrc){
                    imgsrc = scope.mediaitem.img2;
                }

                try{
                    element.attr('src',imgsrc);
                }
                catch(err){
                }
            }
        };
    })

0 个答案:

没有答案