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

【问题标题】：Fade <div> element after submit button has been pressed按下提交按钮后淡出 <div> 元素
【发布时间】：2016-05-14 14:40:00
【问题描述】：

我有简单的谷歌地图 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 上编写的。

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

【问题讨论】：

这通常使用覆盖整个窗口的 div 和加载消息或 gif 来完成，至于按钮，您始终可以将其属性设置为禁用。
@KarthikMR，感谢您的回复。提交不会阻止页面的其余部分。使用 Angular $http 服务来实现。
你是通过ajax调用提交的吗？如果是，请发布代码。
@KarthikMR，我正在使用 angular $http 不确定其底层是什么技术，但假设它与 ajax 非常相似，因为它不会阻塞页面。 docs.angularjs.org/api/ng/service/$http
发布您的提交代码

标签： javascript jquery html css angularjs

【解决方案1】：

请求前淡出地图，显示加载文本，得到响应后，隐藏加载文本并淡入地图

$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 使其位于我的 map 元素的中间而不是重载？
设置加载div的高宽，即map的值。

【解决方案2】：

这样的事情怎么样：

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

};

【讨论】：