Question

用angularjs绑定repeat出来的图片怎么实现在加载完成前显示一张正在加载的占位图？

Answer 1

由于AngularJS通过“dirtychecking”函数来检测变化。每次检测都会花费时间，所以包含复杂数据结构的大型列表将降低应用的运行速度。如果是列表数据量大，缓解该问题，最好的办法是限制所显示列表的大小。可通过分页、添加无限滚动条来实现。如果不能/不想使用分页，但过滤过程又很慢，这时一定要检查前五步，并使用“ng-show”隐藏掉多余的列表元素。另外，将要显示的列表与总的数据列表分开，是非常有用的模型。可以对一些过滤进行预处理，并将存于缓存中的链接应用到视图上。不要使用内部指令，像ng-mouseenter，AngularJS会使的页面闪烁。另外如果需要的话一定要使用ng-if这样可以阻止渲染（与ng-show相比）。

Answer 2

var module = angular.module('testApp', [])

    .controller('myC',function(){

        $scope.ta = [1,2,3,4,5,6];

    })
   .directive('onFinishRender', function () {
   return {
       restrict: 'A',
       link: function (scope, element, attr) {
           if (scope.$last === true) {
               element.ready(function () {

                        $("#r_img").remove();

               });
           }
       }
   }
});

<div ng-app="testApp" ng-controller="myC">
    <img id="r_img" src="xxxx/xx.jpg"/>
    <p ng-repeat="t in ta" on-finish-render="test()">{{t}}</p>
</div>