如何检测AngularJS中完成的所有imges加载

image.addEventListener('load',function() {
       /* do stuff */ 
});

角度指令

单个图像的解决方案

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <loaded-img src="src"></loaded-img>
        <img ng-src="{{src2}}" />'
    </div>
</div>

JS

var myApp = angular.module('myapp',[]);
myApp
    .controller('MyCtrl1',function ($scope) {
            $scope.src = "http://lorempixel.com/800/200/sports/1/";
            $scope.src2 = "http://lorempixel.com/800/200/sports/2/";
    })
    .directive('loadedImg',function(){
        return {
            restrict: 'E',scope: {
                src: '='
            },replace: true,template: '<img ng-src="{{src}}" class="none"/>',link: function(scope,ele,attr){
                ele.on('load',function(){
                    ele.removeClass('none');
                });           
            }
        };
    });

CSS

.none{
    display: none;
}

http://jsfiddle.net/jigardafda/rqkor67a/4/

如果您看到jsfiddle演示,您会注意到src图像仅在图像完全加载后显示,而在src2的情况下,您可以看到图像加载.(禁用缓存以查看差异)

多个图像的解决方案

HTML

<div ng-app="myapp">
    <div ng-controller="MyCtrl1">
        <div ng-repeat="imgx in imgpaths" ng-hide="hideall">
            <loaded-img isrc="imgx.path" onloadimg="imgx.callback(imgx)"></loaded-img>
        </div>
    </div>
 </div>

JS

var myApp = angular.module('myapp',function ($scope,$q) {

        var imp = 'http://lorempixel.com/800/300/sports/';

        var deferred;
        var dArr = [];
        var imgpaths = [];

        for(var i = 0; i < 10; i++){
            deferred = $q.defer();
            imgpaths.push({
                path: imp + i,callback: deferred.resolve
            });
            dArr.push(deferred.promise);
        }

        $scope.imgpaths = imgpaths;

        $scope.hideall = true;

        $q.all(dArr).then(function(){
            $scope.hideall = false;
            console.log('all loaded')
        });
    })
    .directive('loadedImg',scope: {
                isrc: '=',onloadimg: '&'
            },template: '<img ng-src="{{isrc}}" class="none"/>',function(){
                    console.log(scope.isrc,'loaded');
                    ele.removeClass('none');
                    scope.onloadimg();
                });           
            }
        };
    });

要检测是否所有图像都已加载,

对于每个图像,我生成了一个延迟对象,并将其deferred.resolve作为指令的图像onload回调传递,然后在数组中推送延迟对象.然后我使用$q.all来检测所有这些承诺是否已经解决.

http://jsfiddle.net/jigardafda/rqkor67a/5/

更新：添加角度方式.

更新：添加了加载多个图像的解决方案.