Cách hiển thị gif tải trung bình trong khi biểu mẫu gửi đang được thực thi JQuery

Question

Tôi đang cố gắng hiển thị gif spinner đơn giản trong khi gửi đang được thực thi (phải mất một chút vì tôi phải thiết lập một số liên lạc với nhà cung cấp qua web dịch vụ).

Vì vậy, tôi có điều này:

$('#gds_form').submit(function() { 
     var pass = true; 
     //some validations 

     if(pass == false){ 
      return false; 
     } 

     $("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>'); 
     $("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>"); 
     return true; 
    }); 

vấn đề là, rằng .gif không hiển thị bất kỳ hình ảnh động, nó giống như nó được đông lạnh.

Tại sao?

Có một cách khác để thực hiện điều này (thông báo rằng tôi không sử dụng AJAX và tôi không muốn)?

Cảm ơn bạn.

Answer 1

Bạn đã thử tải hình ảnh trên tài liệu đã sẵn sàng, chỉ để ẩn hình ảnh đó. Sau đó hiển thị nó trong chức năng của bạn? Bằng cách này, hình ảnh đã được tải và quay.

$(document).ready(function() { 
    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>'); 
    $("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>"); 
}); 

$('#gds_form').submit(function() { 
    var pass = true; 
    //some validations 

    if(pass == false){ 
     return false; 
    } 
    $("#overlay, #PleaseWait").show(); 

    return true; 
}); 

Answer 2

Sử dụng .show() và .hide() để bật hoạt ảnh tải trong khi gửi?

Answer 3

Vấn đề thực sự với việc triển khai của bạn là cách phía khách hàng biết khi nào yêu cầu của bạn đã hoàn tất. Một trong những lý do tại sao Ajax là hữu ích là vì chúng ta có khái niệm về các trạng thái và do đó chúng ta có thể hiển thị bộ tải trong khi máy khách đợi phản hồi và loại bỏ bộ nạp khi máy khách nhận được phản hồi.

Bạn sẽ xác định thời điểm giao tiếp với dịch vụ web hoàn tất? Bạn nói rằng bạn không muốn sử dụng Ajax, nhưng nếu bạn muốn truy vấn một dịch vụ để xác định xem thông tin liên lạc của bạn đã hoàn thành chưa, bạn có thể thấy một thứ gì đó sẽ yêu cầu Ajax.

Answer 4

Tôi sẽ là div trên trang để bắt đầu, nhưng với style='display:none' sau đó hãy dán $('#PleaseWait').show() vào mã của bạn khi bạn muốn mã xuất hiện.

Nếu bạn rời khỏi display:none, bạn có thể chỉnh sửa xem hình thức của nó trông như thế nào mà không cần phải gửi biểu mẫu nhiều lần.

NB: bạn có thể muốn bọc lớp phủ và gif trong div phụ huynh để thuận tiện.

Answer 5

Sử dụng jQuery submit chức năng, bạn có thể chỉ định một hình ảnh tải như thế này:

$('#form').submit(function() { 
    $('#wait').show(); 
    $.post('/somepage.htm', function() { 
     $('#wait').hide(); 
    }); 
    return false; 
});