是否可以改編以下jQuery？

Question

我最近在網頁上添加了一個響應式加載圖標到我的網站。 除非我想在執行JavaScript函數時顯示圖像，否則如果用戶在第一個xmlhttp請求完成之前第二次運行腳本，它將無法正常工作。

 $(window).load(function() { $(".se-pre-con").fadeOut("slow"); });

 .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .se-pre-con { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="se-pre-con"></div>

有沒有一種方法可以修改jQuery以使其更適合我？ 還是你們有完全不同的解決方案，仍然可以解決問題？

Answer 1

如果您將此用於AJAX。 使用以下方式顯示/隱藏加載程序。

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

Answer 2

存在一些輕量級插件（2kb），例如https://github.com/jgerigmeyer/jquery-loading-overlay ，可以這樣使用：

開始：

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

並停止：

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

只需將其放在函數中，別忘了進行同步調用 ，否則將毫無意義:)

Answer 3

如果我清楚地理解了您的需求，那么我認為您想在xmlhttp請求之前添加一個加載圖像，當請求工作完成時，它就會關閉。

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

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

    </div>
</div>

在css中跟隨幾行，別忘了在要加載圖像的images文件夾中添加bg.png圖像

#loadingDiv {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: fixed;
    background: url(../images/bg.png) repeat;
    overflow: auto;
    z-index: 100000;
}

div#popupContact {
    position: fixed;
    left: 48%;
    top: 40%;
    background: url(../images/loading.gif) no-repeat;
    width: 100%;
    height: 100%;
    float: left;
}

然后在您的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（），並在成功或錯誤時調用hideProcessImg（），如下所示回調httprequest

showProcessImg();

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

Answer 4

只需創建一個疊加div ，然后切換其display屬性即可。

這是一件小事。 請注意，不需要圖像，但需要使用支持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;
}

Answer 5

這里給出的所有答案都是好的，但是如果您希望默認情況下所有AJAX請求的加載程序映像，可以嘗試以下方法：

 <body> </body> <div class="modalLoader"></div>

 <script> $body = $("body"); $(document).on({ ajaxStart: function() { $body.addClass("loading");}, ajaxStop: function() { $body.removeClass("loading");} }); </script>

 .modalLoader { display: none; position: fixed; z-index: 1500; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8 ) url('../img/loaders/loader.gif') 50% 50% no-repeat; } body.loading { overflow: hidden; } body.loading .modalLoader { display: block; }

謝謝

是否可以改編以下jQuery？

問題描述

5 個解決方案

解決方案1
2 2015-07-16 11:18:45

解決方案2
1 2015-07-16 10:57:47

解決方案3
1 已采納 2015-07-16 11:13:59

解決方案4
1 2015-07-16 11:15:35

解決方案5
1 2016-11-02 15:14:49

是否可以改編以下jQuery？

問題描述

5 個解決方案

解決方案1 2 2015-07-16 11:18:45

解決方案2 1 2015-07-16 10:57:47

解決方案3 1 已采納 2015-07-16 11:13:59

解決方案4 1 2015-07-16 11:15:35

解決方案5 1 2016-11-02 15:14:49

解決方案1
2 2015-07-16 11:18:45

解決方案2
1 2015-07-16 10:57:47

解決方案3
1 已采納 2015-07-16 11:13:59

解決方案4
1 2015-07-16 11:15:35

解決方案5
1 2016-11-02 15:14:49