Làm cách nào để hiển thị chỉ báo "bận" với jQuery?

Làm cách nào để hiển thị chỉ báo "bận" đang quay tại một điểm cụ thể trong trang web?

Tôi muốn bắt đầu / dừng chỉ báo khi yêu cầu Ajax bắt đầu / hoàn thành.

Nó thực sự chỉ là một vấn đề hiển thị / ẩn một gif động, hay có một giải pháp thanh lịch hơn?

Bạn chỉ có thể hiển thị / ẩn ảnh gif, nhưng bạn cũng có thể nhúng ảnh đó vào ajaxSetup, vì vậy nó được gọi theo mọi yêu cầu ajax.

$.ajaxSetup({
    beforeSend:function(){
        // show gif here, eg:
        $("#loading").show();
    },
    complete:function(){
        // hide gif here, eg:
        $("#loading").hide();
    }
});

Một lưu ý là nếu bạn muốn thực hiện một yêu cầu ajax cụ thể mà không cần có con quay tải, bạn có thể thực hiện như sau:

$.ajax({
   global: false,
   // stuff
});

Bằng cách đó, $ .ajaxSetup trước đó mà chúng tôi đã làm sẽ không ảnh hưởng đến yêu cầu global: false.

Thông tin chi tiết có tại: http://api.jquery.com/jQuery.ajaxSetup

Tài liệu jQuery khuyên bạn nên làm điều gì đó như sau:

$( document ).ajaxStart(function() {
  $( "#loading" ).show();
}).ajaxStop(function() {
  $( "#loading" ).hide();
});

Trong trường hợp #loadinglà yếu tố với chỉ bận rộn của bạn trong đó.

Người giới thiệu:

• http://api.jquery.com/ajaxStart/

• http://api.jquery.com/ajaxStop/

• Ngoài ra, jQuery.ajaxSetupAPI khuyến nghị rõ ràng nên tránh jQuery.ajaxSetupnhững điều sau:

  Lưu ý: Chức năng gọi lại toàn cầu nên được thiết lập với methods- Ajax xử lý sự kiện toàn cầu của mình .ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()-rather hơn trong optionsđối tượng cho $.ajaxSetup().

Tôi có xu hướng chỉ hiển thị / ẩn một IMG như những người khác đã nêu. Tôi đã tìm thấy một trang web tốt tạo "tải gif"

Link Tôi chỉ đặt nó bên trong a divvà ẩn theo mặc định display: none;(css) sau đó khi bạn gọi hàm hiển thị hình ảnh, khi hoàn thành ẩn nó lại.

vâng, nó thực sự chỉ là vấn đề hiển thị / ẩn một gif động.

Tôi đã làm điều đó trong dự án của mình,

tạo một div với url back ground dưới dạng gif, không có gì khác ngoài ảnh động gif

<div class="busyindicatorClass"> </div>

.busyindicatorClass
{
background-url///give animation here
}

trong lệnh gọi ajax của bạn, hãy thêm lớp này vào div và trong ajax thành công, hãy xóa lớp đó.

nó sẽ thực hiện thủ thuật đó.

cho tôi biết nếu bạn cần thứ gì khác, tôi có thể cung cấp cho bạn thêm chi tiết

trong ajax thành công loại bỏ lớp

success: function(data) {
    remove class using jquery
  }

Để mở rộng giải pháp của Rodrigo một chút - đối với các yêu cầu được thực hiện thường xuyên, bạn có thể chỉ muốn hiển thị hình ảnh đang tải nếu yêu cầu mất nhiều hơn một khoảng thời gian tối thiểu, nếu không hình ảnh sẽ liên tục xuất hiện và nhanh chóng biến mất

var loading = false;

$.ajaxSetup({
    beforeSend: function () {
        // Display loading icon if AJAX call takes >1 second
        loading = true;
        setTimeout(function () {
            if (loading) {
                // show loading image
            }
        }, 1000);            
    },
    complete: function () {
        loading = false;
        // hide loading image
    }
});

Tôi đã làm điều đó trong dự án của mình:

Sự kiện toàn cầu trong application.js:

$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });

"loading" là phần tử để hiển thị và ẩn!

Tài liệu tham khảo: http://api.jquery.com/Ajax_Events/

Tôi đã phải sử dụng

HTML:
   <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

In script file:
  // invoked when sending ajax request
  $(document).ajaxSend(function () {
      $("#loading").show();
  });

  // invoked when sending ajax completed
  $(document).ajaxComplete(function () {
      $("#loading").hide();
  });

Chủ đề cũ, nhưng tôi muốn cập nhật vì tôi đã giải quyết vấn đề này hôm nay, tôi không có jquery trong dự án của mình nên tôi đã làm theo cách javascript cũ đơn giản, tôi cũng cần chặn nội dung trên màn hình để trong xhtml của mình

    <img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>

trong javascript của tôi

    document.getElementsByClassName('myclass').style.opacity = '0.7'
    document.getElementById('loading').style.display = "block";