按下提交按钮后淡出元素[英]Fade element after submit button has been pressed 本文翻译自 Wild Goat 查看原文 2016-05-14 125 css/

I have simple google maps div element. When user clicks Submit button expensive calculations gets trigged on backend therefore I want fade the whole google map in order to prevent user from navigating over and illustrate that job is in progress.

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

Simplified example: http://jsfiddle.net/8jhsxbpo/4/

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

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

Note: Submit is not blocking the rest of the page. Doing it using angular $http service.

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

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

My project is written on Bootstrap 3 + Angular Js.

我的项目是在Bootstrap 3 + Angular Js上编写的。

Question: How do I fade or disable element and display loading icon while job is in progress?

问题:在作业进行过程中,如何淡化或禁用元素并显示加载图标?

2 个解决方案

#1

Before making the request fadeout the map, display loading text, and after getting the response, hide loading text and fadein the 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);
   });
};

Add div and span element and set style.

添加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>

#2

What about something like this:

这样的事情怎么样:

<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");

};

#1