我有简单的angular js应用程序。在这里,我正在从Google驱动器中获取图像并显示在页面中。
在这里,我试图显示一个加载器,直到图像完全加载到我的页面中为止。有时,当我的带宽较低时,需要花一些时间从Google驱动器加载图像。 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
答案 0 :(得分:0)
您可以使用布尔变量并根据状态分配值,
urlpatterns = [
# your other patterns
url(r'^password_change/$', auth_views.password_change,
{'post_change_redirect': 'set_goals:password_change_done'},
name='password_change'),
url(r'^password_change/done/$',
auth_views.password_change_done,
name='password_change_done'),
]
并在控制器中
<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>