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){
}
}
};
})