我想使用ng-repeat在页面中显示超过100个图像.这些图像在加载时花费了大量时间,我不希望显示它们被加载到用户.所以,我只想在浏览器中加载它们之后显示它们.
如果加载了所有图像,有没有办法检测？
解决方法
你可以像这样使用load事件.
@H_403_19@image.addEventListener('load',function() {
/* do stuff */
});
角度指令
单个图像的解决方案
HTML
@H_403_19@<div ng-app="myapp"> <div ng-controller="MyCtrl1"> <loaded-img src="src"></loaded-img> <img ng-src="{{src2}}" />' </div> </div>JS
@H_403_19@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
@H_403_19@.none{ display: none; }http://jsfiddle.net/jigardafda/rqkor67a/4/
如果您看到jsfiddle演示,您会注意到src图像仅在图像完全加载后显示,而在src2的情况下,您可以看到图像加载.(禁用缓存以查看差异)
多个图像的解决方案
HTML
@H_403_19@<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
@H_403_19@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/
更新：添加角度方式.
