AngularJS：如何显示preLOAD或装货，直至页面完全加载？ [英] AngularJS: How to show preload or loading until page is loaded completely?
问题描述
我已经在那里我得到从数据库，在我的控制器JSON格式的所有图像和图像相关的数据，然后使用一个图片库网站NG-重复我与HTML结合他们。现在，数据加载初期，但图像的后期加载，使图像散了。如何解决这个问题。我不希望使用的setTimeout。
样品code是如下： -
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN级=无JSNG-应用=CPS＆GT;
＆LT;机身NG控制器=CPSController＆GT;
＆LT; DIV＆GT;
＆LT;李NG重复=形象形象CLASS =显示＆GT;
＆LT;一个ID ={{image.imageid}}NG点击=openimage（image.imageid）＆GT;
＆LT; IMG IDX =ID拇指 - {{$指数}}NG-SRC =/ imagedisplay / {{image.imageid}}ALT =的风格=＆GT;
＆LT; DIV CLASS =meta_info＆GT;
＆LT; H3＆GT; {{image.imagename}}＆LT; / H3 GT＆;
＆LT; DIV CLASS =致电第一＆GT;
＆LT; DIV CLASS =行动＆GT;
＆所述;跨度＆GT;＆下; IMG SRC =IMG / artist.svgALT =＆GT; {{image.ownername}}＆下; /跨度＆GT;
＆所述;跨度＆GT;＆下; IMG SRC =IMG / likes.svgALT =＆GT; {{image.likes}}＆下; /跨度＆GT;
＆所述;跨度＆GT;＆下; IMG SRC =IMG / views_small.svgALT =＆GT; {{image.views}}＆下; /跨度＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =类别＆GT;
艺术类
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆所述; / A＆GT;
＆LT; /李＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;＆LT;脚本＆GT; VAR CPS = angular.module（CPS，[]）;
cps.controller（'CPSController'，函数（$范围，$ HTTP，$编译）{
$ scope.products = [];
$ http.get（/ ALLDATA /）。成功（功能（数据）{
如果（数据！=空）
{
为（ⅰ= data.length-1; I＆GT; = 0; I - ）{
$ scope.products.push（数据由[i]）;
}
$ scope.sendOrder（'意见'，'喜欢'，'时间戳'，2）;
}其他{
// $（'＃noImages）显示（）。
} / *的setTimeout（函数（）{
$（[^ IDX ='ID-拇指']）显示（）;
}）; * /
}）;
}）;
＆LT; / SCRIPT＆GT;
我不知道，如果这是正确的做法，但我通常做的是，我有一个 $ scope.loaded 具有页面的状态变量。如果页面加载，你要显示在div显示...如果它的加载，与装载机股利所示。看看这个普拉克（ http://plnkr.co/edit/S6Srgz8XveLEHcv3i6ST ）得到我M想说什么。
我在这里粘贴Plunkr code为好。
的JavaScript
VAR应用= angular.module（'plunker'，[]）; app.controller（'MainCtrl'，函数（$范围，$超时）{
$ scope.loaded = TRUE;
$ scope.text ='还没有装。; $ scope.loadSomething =功能（）{
$ scope.loaded = FALSE; $超时（函数（）{
//模拟负载
$ scope.text =的'Hello World';
$ scope.loaded = TRUE;
}，2000）;
};
}）;
HTML
＆LT;机身NG控制器=MainCtrl＆GT;
＆LT;按钮类=BTN BTN-主要NG点击=loadSomething（）＆GT;加载的东西与LT; /按钮＆GT;
＆LT; BR /＆GT;
＆LT; DIV NG隐藏=装＆GT;
载入中...
＆LT; / DIV＆GT;
＆LT; DIV NG秀=装＆GT;
＆所述p为H.; {{文本}}＆下; / P＆GT;
＆LT; / DIV＆GT;
不要让我知道如果你需要任何进一步的帮助。
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>
I'm not sure if this is the right approach, but what I usually do is that I have a $scope.loaded variable which has the state of the page. If the page is loaded, the div you want to show is shown... If it's loading, the div with the loader is shown. Have a look at this plunk (http://plnkr.co/edit/S6Srgz8XveLEHcv3i6ST) to get what I'm trying to say.
I'm pasting the Plunkr code here as well.
Javascript
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.loaded = true;
$scope.text = 'Nothing loaded yet.';
$scope.loadSomething = function () {
$scope.loaded = false;
$timeout(function() {
// Simulates loading
$scope.text = 'Hello World';
$scope.loaded = true;
}, 2000);
};
});
HTML
<body ng-controller="MainCtrl">
<button class="btn btn-primary" ng-click="loadSomething()">Load Something</button>
<br/>
<div ng-hide="loaded">
Loading...
</div>
<div ng-show="loaded">
<p>{{ text }}</p>
</div>
Do let me know if you need any further help.
这篇关于AngularJS：如何显示preLOAD或装货，直至页面完全加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
