ページ切り替え時のローディング画像の表示
ページ切り替えで切り替え先のページ表示に時間がかかる場合のローディング画像の表示方法です。
バージョン）
AngularJS 1.3
目次
- 詳細
- 備考
- 参考リンク
詳細
◆ 共通ページ（route-test.html）
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="mainCtrl">
<head>
<base href="http://xxx.yyy.zzz/">
<link rel="stylesheet" href="css/route-test.css" />
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/route-test.js"></script>
</head>
<body>
<-- ローディング時にボタンやリンクを押せないようにする -->
<div ng-if="page.loading" class="loading_mask">
</div>
<-- ローディング画像の表示 -->
<div ng-if="page.loading" class="loading">
<img src="loading.gif" />
</div>
<div ng-view></div>
</body>
</html>
◆ スタイルの設定（route-test.css）
.loading_mask{
position:fixed;
top:0px;
width:100%;
height:100%;
background-color:#fff;
opacity:0.0;
z-index:10000;
}
.loading{
position:fixed;
top:40%;
width:100%;
z-index:11000;
}
◆ ルーティング、コントローラーの設定（route-test.js）
myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/top/', {
templateUrl: 'test-top.html',
controller: 'testTopCtrl'
})
.when('/search/', {
templateUrl: 'test-search.html',
controller: 'testSearchCtrl'
})
.otherwise({
redirectTo:'/top/'
});
$locationProvider.html5Mode(true);
}
myApp.service('util', function($timeout, $q) {
// 非同期処理
this.task = function($scope, func){
var deferred = $q.defer();
$timeout(function() {
var res = func;
$scope.$apply(function() {
deferred.notify();
if (res) {
deferred.resolve();
} else {
deferred.reject();
}
});
}, 1000);
return deferred.promise;
};
});
myApp.controller('mainCtrl', function ($scope) {
var pageInfo = {};
pageInfo.loading = true;
$scope.page = pageInfo;
});
myApp.controller('testTopCtrl', function($scope, util) {
$scope.page.loading = true;
var promise = util.task($scope, function(){
// トップページの処理
});
promise.then(function(success) {
// 成功
}, function(error) {
// 失敗
}, function(notify) {
// 通知
}).finally(function(){
// 終了
$scope.page.loading = false;
});
});
myApp.controller('testSearchCtrl', function($scope, util) {
$scope.page.loading = true;
var promise = util.task($scope, function(){
// 検索ページの処理
});
promise.then(function(success) {
// 成功
}, function(error) {
// 失敗
}, function(notify) {
// 通知
}).finally(function(){
// 終了
$scope.page.loading = false;
});
});
もっと簡単にまとめるつもりでしたが、非同期処理やマスク処理組み込んだらパッと見じゃわからなくなりました。というか、この作り方でいいのかちょっと不安なので参考程度にしてください。
備考
アニメーションを適用すると見栄えがよくなります。
自分の環境だけかもしれませんが、GIF画像によるアニメーションよりもCSSによるアニメーションの方が滑らかに動きました。