AngularJS：如何显示预加载或加载，直到页面完全加载？ [英] AngularJS: How to show preload or loading until page is loaded completely?
问题描述
我有一个图片库网站，其中我从数据库获取所有的图像和图像相关的数据作为json格式在我的控制器，然后通过使用ng-repeat我将它们与html绑定。现在，数据提前加载，但是图像加载较晚，因此图像分散。如何解决这个问题。我不想使用setTimeOut。
I've an image gallery site where I'm getting all images and image related data from the database as json format in my controller and then by using ng-repeat I'm binding them with the html. Now, data are loaded early but images are loaded late, so images are scattered. How to solve this. I don't want to use setTimeOut.
示例代码如下： -
The sample code is as below:-
<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="cps">
<body ng-controller="CPSController">
<div>
<li ng-repeat="image in images" class="shown">
<a id="{{image.imageid}}" ng-click="openimage(image.imageid)">
<img idx="id-thumb-{{$index}}" ng-src="/imagedisplay/{{image.imageid}}" alt="" style="">
<div class="meta_info">
<h3>{{image.imagename}}.</h3>
<div class="callto">
<div class="actions">
<span><img src="img/artist.svg" alt="">{{image.ownername}}</span>
<span><img src="img/likes.svg" alt="">{{image.likes}}</span>
<span><img src="img/views_small.svg" alt="">{{image.views}}</span>
</div>
<div class="category">
Art Category
</div>
</div>
</div>
</a>
</li>
</div>
</body>
</html>
<script>
var cps = angular.module('cps', []);
cps.controller('CPSController', function($scope, $http, $compile){
$scope.products = [];
$http.get("/alldata/").success(function(data){
if(data != "null")
{
for(i=data.length-1; i>=0; i--){
$scope.products.push(data[i]);
}
$scope.sendOrder('views', 'likes', 'timestamp', 2);
}else{
//$('#noImages').show();
}
/*setTimeout(function(){
$("[idx^='id-thumb']").show();
});*/
});
});
</script>
推荐答案
我们不必强制Angular c $ c> vanilla javascript 就足够了。这是它对我的 AngularJS 项目的工作
We don't have to force Angular where vanilla javascript can suffice. This is how it worked for my AngularJS project
添加这个到body标签。 HTML内容加载
Added this to the body tag. It will be removed with a script tag once HTML Content Loads
<div id="page-loading">
<img style="display:block; margin:0 auto;" src="styles/img/page-loading.gif">
</div>
。
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
/*VANILLA JAVASCRIPT*/
var element = document.getElementById("page-loading");
element.parentNode.removeChild(element);
/* OR WITH jQuery*/
$('#page-loading')
.fadeOut('slow');
});
</script>
DOMContentLoaded >将确保在加载所有图像，字体，js和其他资源时执行回调
祝你好运。
这篇关于AngularJS：如何显示预加载或加载，直到页面完全加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
