it-swarm-vi.tech

Làm thế nào để hiển thị tải spinner trong jQuery?

Trong Nguyên mẫu Tôi có thể hiển thị hình ảnh "đang tải ..." với mã này:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

Trong jQuery, Tôi có thể tải một trang máy chủ vào một phần tử với điều này:

$('#message').load('index.php?pg=ajaxFlashcard');

nhưng làm cách nào để đính kèm một spinner tải vào lệnh này như tôi đã làm trong Prototype?

391
Edward Tanguay

Có một vài cách khác nhau. Cách ưa thích của tôi là gắn một hàm vào các sự kiện ajaxStart/Stop trên chính phần tử đó.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

Các hàm ajaxStart/Stop sẽ kích hoạt bất cứ khi nào bạn thực hiện bất kỳ cuộc gọi Ajax nào.

Cập nhật: Kể từ jQuery 1.8, tài liệu nói rằng .ajaxStart/Stop chỉ nên được đính kèm với document. Điều này sẽ chuyển đổi đoạn trích trên thành:

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });
774
nickf

Đối với jQuery tôi sử dụng

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});
203
kr00lix

Bạn chỉ có thể sử dụng hàm .ajax của jQuery và sử dụng tùy chọn beforeSend của nó và xác định một số hàm trong đó bạn có thể hiển thị một cái gì đó như div trình tải và trên tùy chọn thành công, bạn có thể ẩn div trình tải đó.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

Bạn có thể có bất kỳ hình ảnh Quay Gif. Đây là một trang web tuyệt vời AJAX Trình tạo trình tải theo sơ đồ màu của bạn: http://ajaxload.info/

37
Seeker

Bạn có thể chèn hình ảnh động vào DOM ngay trước cuộc gọi AJAX và thực hiện chức năng nội tuyến để xóa nó ...

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

Điều này sẽ đảm bảo hoạt hình của bạn bắt đầu ở cùng một khung cho các yêu cầu tiếp theo (nếu có vấn đề). Lưu ý rằng các phiên bản cũ của IE có thể gặp khó khăn với hình ảnh động.

Chúc may mắn!

22
Josh Stodola
$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

20
Brent

Nếu bạn đang sử dụng $.ajax(), bạn có thể sử dụng một cái gì đó như thế này:

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },             
        type: 'POST', dataType: 'json'
    });  
15
Amin Saqi

Sử dụng plugin tải: http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});
10
Nathan Bubna

Biến thể: Tôi có một biểu tượng với id = "logo" ở trên cùng bên trái của trang chính; một gif spinner sau đó được phủ lên trên (với độ trong suốt) khi ajax đang hoạt động.

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});
8
Paul

Tôi cũng muốn đóng góp cho câu trả lời này. Tôi đã tìm kiếm một cái gì đó tương tự trong jQuery và đây là thứ mà cuối cùng tôi đã sử dụng.

Tôi đã nhận được spinner tải của mình từ http://ajaxload.info/ . Giải pháp của tôi dựa trên câu trả lời đơn giản này tại http://christierney.com/2011/03/23/global-ajax-loading-spinners/ .

Về cơ bản, đánh dấu HTML và CSS của bạn sẽ như thế này:

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

Và sau đó, mã của bạn cho jQuery sẽ trông giống như thế này:

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

Nó đơn giản như vậy :)

7
Brendan Vogt

Tôi đã kết thúc với hai thay đổi đối với trả lời ban đầ .

  1. Kể từ jQuery 1.8, ajaxStart và ajaxStop chỉ nên được đính kèm với document. Điều này làm cho việc lọc chỉ một số yêu cầu ajax trở nên khó khăn hơn. Ôi ...
  2. Chuyển sang ajaxSendajaxComplete cho phép xen kẽ yêu cầu ajax hiện tại trước khi hiển thị spinner.

Đây là mã sau những thay đổi này:

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })
7
Emil Stenström

Bạn có thể chỉ cần gán một hình ảnh trình tải cho cùng một thẻ mà sau đó bạn sẽ tải nội dung bằng một cuộc gọi Ajax:

$("#message").html('<span>Loading...</span>');

$('#message').load('index.php?pg=ajaxFlashcard');

Bạn cũng có thể thay thế thẻ span bằng thẻ hình ảnh.

7
Umesh kumar

Cũng như đặt mặc định toàn cầu cho các sự kiện ajax, bạn có thể đặt hành vi cho các yếu tố cụ thể. Có lẽ chỉ cần thay đổi lớp học của họ là đủ?

$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});

Ví dụ CSS, để ẩn #myForm với một công cụ quay vòng:

.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}
6
LeeGee
$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

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

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });
4
Izabela Skibinska

Lưu ý rằng bạn phải sử dụng các cuộc gọi không đồng bộ để các spinners hoạt động (ít nhất đó là nguyên nhân khiến tôi không hiển thị cho đến sau cuộc gọi ajax và sau đó nhanh chóng biến mất khi cuộc gọi kết thúc và gỡ bỏ spinner).

$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });
4
Shane Rowatt

Tôi đã sử dụng như sau với Hộp thoại UI UI. (Có lẽ nó hoạt động với các cuộc gọi lại ajax khác?)

$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});

Có chứa một gif tải hoạt hình cho đến khi nội dung của nó được thay thế khi cuộc gọi ajax hoàn thành.

2
Quinn Comendant

JavaScript

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

CSS

#loading { background: url(/image/loading.gif) no-repeat center; }
2
Jerry

Đây là cách tốt nhất cho tôi:

jQuery :

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

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

Cà phê :

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

Tài liệu: ajaxStart , ajaxStop

2
Fred K

Đây là một plugin rất đơn giản và thông minh cho mục đích cụ thể đó: https://github.com/hekigan/is-loading

2
andcl

Nếu bạn có kế hoạch sử dụng trình tải mỗi khi bạn yêu cầu máy chủ, bạn có thể sử dụng mẫu sau.

 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });

Mã này đặc biệt sử dụng plugin jajaxloader (mà tôi vừa tạo)

https://github.com/lingtalfi/JAjaxLoader/

1
ling

Nếu bạn không muốn viết mã của riêng mình, thì cũng có rất nhiều plugin làm điều đó:

1
keithhackbarth

Tôi làm việc này:

var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });
1
user968652

Tôi nghĩ bạn đúng. Phương pháp này quá toàn cầu ...

Tuy nhiên - đó là một mặc định tốt khi cuộc gọi AJAX của bạn không có hiệu lực trên chính trang đó. (lưu nền chẳng hạn). (bạn luôn có thể tắt nó cho một cuộc gọi ajax nào đó bằng cách chuyển "global": false - xem tài liệu tại jquery

Khi cuộc gọi AJAX có nghĩa là làm mới một phần của trang, tôi thích hình ảnh "đang tải" của mình dành riêng cho phần được làm mới. Tôi muốn xem phần nào được làm mới.

Hãy tưởng tượng nó sẽ tuyệt như thế nào nếu bạn có thể chỉ cần viết một cái gì đó như:

$("#component_to_refresh").ajax( { ... } ); 

Và điều này sẽ hiển thị một "tải" trên phần này. Dưới đây là một chức năng tôi đã viết xử lý hiển thị "đang tải" nhưng nó dành riêng cho khu vực bạn đang làm mới trong ajax.

Trước tiên, hãy để tôi chỉ cho bạn cách sử dụng nó

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

Và đây là chức năng - một khởi đầu cơ bản mà bạn có thể nâng cao theo ý muốn. nó rất linh hoạt.

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};
1
guy mograbi

Mã ajax của tôi trông như thế này, thực tế, tôi vừa nhận xét async: false line và spinner xuất hiện.

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

Tôi đang hiển thị spinner trong một hàm trước mã ajax:

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

Đối với Html, tôi đã sử dụng một lớp phông chữ tuyệt vời:

<i id="ajaxspinner" class="fas fa-spinner fa-spin fa-3x fa-fw" style="display:none"></i>

Hy vọng nó sẽ giúp được ai đó.

1
Jaggan_j

Bạn luôn có thể sử dụng Chặn plugin jQuery UI sẽ thực hiện mọi thứ cho bạn và thậm chí nó còn chặn trang của bất kỳ đầu vào nào trong khi ajax đang tải. Trong trường hợp plugin dường như không hoạt động, bạn có thể đọc về cách sử dụng đúng trong câu trả lời này. Kiểm tra xem nó ra.

0
SamyCode