javascript - 按下提交按钮后淡化 <div> 元素

Question

我有简单的谷歌地图 div 元素。当用户点击 Submit 按钮时，后端会触发昂贵的计算，因此我希望淡化整个谷歌地图，以防止用户导航并说明工作正在进行中。

简化示例:http://jsfiddle.net/8jhsxbpo/4/

  <div id="map_canvas" ></div>
  <button ng-click="getPlace()" type="button">Submit</button>

注意:提交不会阻塞页面的其余部分。使用 Angular $http 服务来完成它。

$scope.getPlace = function(term, locale) {
    return $http.get('http://localhost:8080/search', {
        params: {
            term: term,
            locale: locale
        }
    }).then(function(response){
        renderMap(response);
    });
};

我的元素是在 Bootstrap 3 + Angular Js 上编写的。

问题:如何在作业进行时淡化或禁用元素并显示加载图标？

Answer 1

请求淡出 map 前显示loading文字，得到响应后隐藏loading文字淡入 map

$scope.getPlace = function(term, locale) {
    $("#map_canvas").fadeOut();
    document.getElementById("loading").style.display = "table";
    return $http.get('http://localhost:8080/search', {
        params: {
           term: term,
           locale: locale
        }
   }).then(function(response){
       $("#loading").hide();
       $("#map_canvas").fadeIn();
       renderMap(response);
   });
};

添加div和span元素并设置样式。

 <div id="loading" class="loading-div">
     <span class="loading-span">Loading...</span>
 </div>
 <div id="map_canvas" ></div>

<style>
  .loading-div {
  display : none;
  width: 250px; //set width of map div
  height: 400px; //set height of map div
  text-align: center;
}

.loading-span {
  display: table-cell;
  vertical-align: middle;
}
</style>