Javascript 是否可以调整以下jQuery？

我最近在我的网站上添加了一个页面加载时响应加载的图标。除非我想在执行JavaScript函数时显示该图像，因为如果用户在第一个xmlhttp请求完成之前再次运行脚本，它将无法正常工作

$（窗口）.load（函数（）{
美元（“.se pre con”）。淡出（“缓慢”）；
});
.no js#loader{
显示：无；
}
.js#加载器{
显示：块；
位置：绝对位置；
左：100px；
排名：0；
}
.se预检{
位置：固定；
左：0px；
顶部：0px；
宽度：100%；
身高：100%；
z指数：9999；
背景：url（images/loader-64x/preload_2.gif）中心无重复#fff；
}

存在一些类似于2kb的light插件，可以这样使用：

开始：

$('#target').loadingOverlay();

并停止：

$('#target').loadingOverlay('remove');

只需将其放入函数中，不要忘记执行同步调用，否则它将毫无意义：）
如果我清楚地理解了您的需求，那么我认为您希望在xmlhttp请求之前添加加载映像，当请求工作完成后，它将关闭

首先在html文件中添加以下代码

<div id="loadingDiv">
    <div id="popupContact">

    </div>
</div>

然后在js文件中添加以下两种方法

//it will show process image
function showProcessImg(){
    $('#loadingDiv').css('display','block');
}
//it will hide process image
function hideProcessImg(){
    $('#loadingDiv').css('display','none');
}

在httprequest之前调用showProcessImg（），在httprequest的成功或错误回调中调用hideProcessImg（），如下所示

showProcessImg();

    $.ajax({
        url:'',
        method:'POST',
        success:function(response){
            hideProcessImg();
        },
        error:function(){
            //disable loading image
            hideProcessImg();
            alert('Error occur here');
        }
    });

只需创建一个覆盖
div
，然后切换其
显示属性

一把小提琴。注意：不需要图像，但需要支持css3的浏览器

#waiting-container {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1130;
  display: hide;
}

#waiting-container #waiting-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1132;
}

#waiting-spinner .spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 40px;
  width: 40px;
  margin: 0 auto;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 6px solid rgba(0, 174, 239, .15);
  border-right: 6px solid rgba(0, 174, 239, .15);
  border-bottom: 6px solid rgba(0, 174, 239, .15);
  border-top: 6px solid rgba(0, 174, 239, .8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#waiting-container #waiting-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  opacity: .5;
  z-index: 1131;
}

如果您将此用于AJAX。使用以下方式显示/隐藏加载程序

$(".se-pre-con").show(); // before initiate ajax call
$.ajax({
   url: "test.html",
   context: document.body
}).done(function() {
   $(".se-pre-con").hide();
});

这里给出的所有答案都很好，但如果您希望所有AJAX请求都默认使用加载程序映像，则可以尝试以下方法：



你到底想要什么？
$（“.se pre con”）.show（）
可能我想在执行JavaScript函数时显示图像。目前页面上有很多不错的答案，但这是我使用的答案，效果非常好。
$(".se-pre-con").show(); // before initiate ajax call
$.ajax({
   url: "test.html",
   context: document.body
}).done(function() {
   $(".se-pre-con").hide();
});