Question

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

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

注意：提交不会阻止页面的其余部分。使用角度$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>

按下提交按钮后淡出<div>元素

2 个答案: