แสดงภาพขณะโหลดขณะที่ $ .ajax ดำเนินการ

ฉันแค่สงสัยว่าจะแสดงภาพที่บ่งชี้ว่าคำขอ async กำลังทำงานอยู่ได้อย่างไร ฉันใช้รหัสต่อไปนี้เพื่อดำเนินการร้องขอ async:

$.ajax({
  url: uri,
  cache: false,
  success: function(html){
    $('.info').append(html);
  }
});

ความคิดใด ๆ ?

แน่นอนคุณสามารถแสดงก่อนส่งคำขอและซ่อนหลังจากเสร็จสิ้น:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

ฉันมักจะชอบวิธีแก้ปัญหาทั่วไปมากกว่าในการผูกเข้ากับเหตุการณ์ ajaxStart และ ajaxStop ระดับโลกวิธีนี้จะปรากฏขึ้นสำหรับเหตุการณ์ ajax ทั้งหมด:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

ใช้ ajax object ของ beforeSend และฟังก์ชั่นที่สมบูรณ์ ควรแสดง gif จากข้างใน beforeSend เพื่อให้พฤติกรรมทั้งหมดถูกห่อหุ้มไว้ในวัตถุเดียว ระวังการซ่อน gif โดยใช้ฟังก์ชันสำเร็จ หากคำขอล้มเหลวคุณอาจยังต้องการซ่อน gif ในการดำเนินการนี้ให้ใช้ฟังก์ชัน Complete จะมีลักษณะดังนี้:

$.ajax({
    url: uri,
    cache: false,
    beforeSend: function(){
        $('#image').show();
    },
    complete: function(){
        $('#image').hide();
    },
    success: function(html){
       $('.info').append(html);
    }
});

รหัส HTML:

<div class="ajax-loader">
  <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" />
</div>

รหัส CSS:

.ajax-loader {
  visibility: hidden;
  background-color: rgba(255,255,255,0.7);
  position: absolute;
  z-index: +100 !important;
  width: 100%;
  height:100%;
}

.ajax-loader img {
  position: relative;
  top:50%;
  left:50%;
}

รหัส JQUERY:

$.ajax({
  type:'POST',
  beforeSend: function(){
    $('.ajax-loader').css("visibility", "visible");
  },
  url:'/quantityPlus',
  data: {
   'productId':p1,
   'quantity':p2,
   'productPrice':p3},
   success:function(data){
     $('#'+p1+'value').text(data.newProductQuantity);
     $('#'+p1+'amount').text("₹ "+data.productAmount);
     $('#totalUnits').text(data.newNoOfUnits);
     $('#totalAmount').text("₹ "+data.newTotalAmount);
  },
  complete: function(){
    $('.ajax-loader').css("visibility", "hidden");
  }
});

}

โดยทั่วไป "รูปภาพ" ที่คนทั่วไปจะแสดงในระหว่างการโทร ajax คือ gif แบบเคลื่อนไหว เนื่องจากไม่มีวิธีกำหนดเปอร์เซ็นต์ที่สมบูรณ์ของคำขอ ajax ดังนั้น gif แบบเคลื่อนไหวที่ใช้จึงเป็นสปินเนอร์ที่ไม่แน่นอน นี่เป็นเพียงภาพที่ทำซ้ำแล้วซ้ำอีกเหมือนลูกบอลวงกลมที่มีขนาดแตกต่างกัน ไซต์ที่ดีในการสร้างสปินเนอร์ที่ไม่แน่นอนของคุณเองคือhttp://ajaxload.info/

ฉันคิดว่านี่อาจจะดีกว่าถ้าคุณมีการโทรเป็นจำนวน $ .ajax

$(document).ajaxSend(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeIn(250);
});
$(document).ajaxComplete(function(){
    $(AnyElementYouWantToShowOnAjaxSend).fadeOut(250);
});

บันทึก:

หากคุณใช้ CSS องค์ประกอบที่คุณต้องการแสดงในขณะที่ ajax กำลังดึงข้อมูลจากโค้ดส่วนหลังของคุณจะต้องเป็นเช่นนี้

AnyElementYouWantToShowOnAjaxSend {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* to make it responsive */
    width: 100vw; /* to make it responsive */
    overflow: hidden; /*to remove scrollbars */
    z-index: 99999; /*to make it appear on topmost part of the page */
    display: none; /*to make it visible only on fadeIn() function */
}

ฉันชอบBlockUIปลั๊กอินนี้มาโดยตลอด: http://jquery.malsup.com/block/

ช่วยให้คุณสามารถบล็อกองค์ประกอบบางอย่างของเพจหรือทั้งเพจในขณะที่คำขอ ajax ทำงานอยู่

ก่อนที่คุณจะโทรให้แทรกรูปภาพการโหลดใน div / span ที่ใดที่หนึ่งจากนั้นในฟังก์ชันความสำเร็จให้ลบรูปภาพนั้นออก หรือคุณสามารถตั้งค่าคลาส css เช่นการโหลดที่อาจมีลักษณะเช่นนี้

.loading
{
    width: 16px;
    height: 16px;
    background:transparent url('loading.gif') no-repeat 0 0;
    font-size: 0px;
    display: inline-block;
}

จากนั้นกำหนดคลาสนี้ให้กับช่วง / div และล้างในฟังก์ชันความสำเร็จ

อะไรทำนองนี้:

$('#image').show();
$.ajax({
    url: uri,
    cache: false,
    success: function(html){
       $('.info').append(html);
       $('#image').hide();
    }
});

คุณสามารถเพิ่ม ajax start และ complete event ซึ่งใช้ได้เมื่อคุณคลิกที่ปุ่ม event

 $(document).bind("ajaxSend", function () {
            $(":button").html('<i class="fa fa-spinner fa-spin"></i> Loading');
            $(":button").attr('disabled', 'disabled');
        }).bind("ajaxComplete", function () {
            $(":button").html('<i class="fa fa-check"></i> Show');
            $(":button").removeAttr('disabled', 'disabled');
        });

1. สร้างองค์ประกอบโหลดเช่นองค์ประกอบที่มี id = example_load
2. ซ่อนตามค่าเริ่มต้นโดยเพิ่ม style = "display: none;"

3. ตอนนี้แสดงโดยใช้ jquery show element function เหนือ ajax ของคุณ

   $('#example_load').show(); $.ajax({ type: "POST", data: {}, url: '/url', success: function(){ // Now hide the load element $('#example_load').hide(); } });