我想用ng-repeat
在一个页面中显示超过 100 张图像。这些图像在加载时需要花费大量时间,我不想向用户显示它们正在加载。所以,我只想在浏览器中加载所有内容后显示它们。
有没有办法检测是否所有图像都已加载?
最佳答案
您可以使用 load
像这样的事件。
image.addEventListener('load', function() {
/* do stuff */
});
Angular 指令
单图解决方案
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',[]);
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
检测所有这些 promise 是否还没有解决。http://jsfiddle.net/jigardafda/rqkor67a/5/
更新:添加了 Angular 方式。
更新:添加了加载多个图像的解决方案。
关于angularjs - 如何检测在 AngularJS 中完成的所有图像加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30198546/