我有一个简单的angular js应用程序。在这里，我从谷歌驱动器获取图像并显示在页面中。
在这里，我试图显示一个加载程序，直到图像完全加载到我的页面中。有时，当我的带宽较低时，从谷歌驱动器加载图像需要时间。所以i want to implement a loader on my screen until all images are fully loaded。
我如何知道图像何时完全加载，然后我可以隐藏我的装载机。我不想使用setTimeout((。
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="basicApp">
<div ng-controller="ListController">
<h1 ng-if="loading"> loading</h1>
<div ng-if="!loading" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-repeat="url in urls" imageload>
<div>
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src={{url}} alt={{url}} style="width:auto;max-width:100%"
/>
</a>
<div style="display:block;font-size:90%"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
控制器
app.controller('ListController', ['$scope', '$location', '$window', function ($scope, $location, $window) {
var data = [
'https://drive.google.com/uc?export=view&id=1wZdBP8CMyLDOFGcvWY7KpffMhTRBHt1J',
'https://drive.google.com/uc?export=view&id=1zc1LqOPUQLbL4-LKBlDAOsetcqMgcWpi',
'https://drive.google.com/uc?export=view&id=1lB4SaiYedYfsxlXJEykC9ErJq8R40e3y'
]
function getAll() {
$scope.urls = data;
}
function init() {
$scope.loading = true;
getAll();
}
init();
}]);
指令
app.directive('imageload', ['$timeout', function ($timeout, $scope) {
return {
restrict: 'A',
link: function (scope, ele) {
$timeout(function () {
var img = angular.element(ele.find('img')[0]);
console.log(img);
$scope.loading = true;
img.bind('load', function () {
console.log('img is loaded');
$scope.loading = false;
});
});
}
};
}]);
请检查我的plunkr
您可以使用布尔变量并根据状态分配值，
<h1 ng-if="loading"> loading</h1>
<div ng-if="!loading" class="col-lg-6 col-md-6 col-sm-6 col-xs-6" ng-repeat="url in urls">
<div>
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src={{url}} alt={{url}} style="width:auto;max-width:100%" />
</a>
<div style="display:block;font-size:90%"></div>
</div>
</div>
</div>
</div>
在控制器中，
function getAll() {
$scope.urls = data;
$scope.loading = false;
}
function init() {
$scope.loading = true;
getAll();
}
DEMO