褪色 <div> 按下提交按鈕后的元素

Question

我有簡單的谷歌地圖div元素。 當用戶單擊“ Submit按鈕時，后端將觸發昂貴的計算，因此，我希望淡出整個Google地圖，以防止用戶瀏覽並說明該工作正在進行中。

簡化示例： http ： //jsfiddle.net/8jhsxbpo/4/

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

注意：提交不會阻止頁面的其余部分。 使用有角的$http服務$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

像這樣的事情呢：

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

var showLoader = function () {

    $("#map_canvas").hide();
    var loader = '<img id="loaderImage" src="/Content/Images/Loaders/loading4.gif" style="width:150px;height:150px;" />';

    $("#loading").addClass("text-center");
    $("#loading").append(loader);
};

var hideLoader = function () {

    $("#map_canvas").show();
    $("#loading" + " img:last-child").remove();
    $("#loading").removeClass("text-center");

};

Answer 2

在使請求淡出地圖之前，顯示加載文本，在獲得響應后，隱藏加載文本並淡入地圖

$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>