如何检测在AngularJS中完成的所有图像加载答案

【问题标题】：How to detect all imges loading finished in AngularJS如何检测在AngularJS中完成的所有图像加载
【发布时间】：2015-12-14 22:00:02
【问题描述】：

我想使用ng-repeat 在一个页面中显示超过 100 个图像。这些图像在加载过程中花费了大量时间，我不想向用户展示它们。所以，我只想在它们都加载到浏览器中之后显示它们。

有没有办法检测是否所有的图片都加载了？

【问题讨论】：

标签： angularjs loading document-ready

【解决方案1】：

您可以像这样使用load 事件。

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>

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>

var myApp = angular.module('myapp',[]);
myApp
    .controller('MyCtrl1', 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', function(){
        return {
            restrict: 'E',
            scope: {
                isrc: '=',
                onloadimg: '&'
            },
            replace: true,
            template: '<img ng-src="{{isrc}}" class="none"/>',
            link: function(scope, ele, attr){
                ele.on('load', function(){
                    console.log(scope.isrc, 'loaded');
                    ele.removeClass('none');
                    scope.onloadimg();
                });           
            }
        };
    });

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

对于每个图像，我生成了一个deferred 对象并将其deferred.resolve 作为指令的图像加载回调传递，然后将deferred 对象promise 推送到一个数组中。之后我使用$q.all 来检测是否所有这些承诺都已解决。

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

更新：添加了角度方式。

更新：添加了加载多张图片的解决方案。

【讨论】：

谢谢，关于这个的两个问题：[1] 这个加载事件是否意味着完成加载单个图像？ [2] 如果是[1]，如何检测所有加载事件被触发？
您没有回答.. OP 想要什么.. 您只考虑单个.. 如果使用 ng-repeat 加载图像会怎样
@Kuan，一种方法是跟踪服务中的所有图像状态（已加载或未加载）。并且一旦加载了所有图像，服务就会触发一些事件来通知。
@pankajparkar 和 Kuan，我添加了加载多个图像的解决方案，请检查更新的答案。
@jad-panda 感谢..+1 为您的回答

【解决方案2】：

检查是否所有图片都加载完毕

jQuery.fn.extend({
  imagesLoaded: function( callback ) {
    var i, c = true, t = this, l = t.length;
    for ( i = 0; i < l; i++ ) {
      if (this[i].tagName === "IMG") {
        c = (c && this[i].complete && this[i].height !== 0);
      }
    }
    if (c) {
      if (typeof callback === "function") { callback(); }
    } else {
      setTimeout(function(){
        jQuery(t).imagesLoaded( callback );
      }, 200);
    }
  }
});

所有图片加载完毕后回调
图像加载错误被忽略（完全正确）
使用： $('.wrap img').imagesLoaded(function(){ alert('all images loaded'); });

注意：这段代码对我有用，来源：

http://wowmotty.blogspot.in/2011/12/all-images-loaded-imagesloaded.html

【讨论】：

OP 要求 Angular