Lịch sử Api: Cách thông báo cho trình duyệt biết rằng trang đang tải?

Question

Tôi đã làm việc với api lịch sử trong khi tôi tải các trang không đồng bộ thông qua javascript/jquery. Tôi tự hỏi làm thế nào nó có thể nói với trình duyệt, rằng trang web đang tải, để trình duyệt có thể hiển thị một hình ảnh tải (như bánh xe quay trong firefox).

Edit:

Để cụ thể hơn:

Nếu tôi tải một trang trên trang web của tôi, những thay đổi url, nội dung mới được hiển thị, nhưng Firefox không hiển thị các bánh xe quay như một tín hiệu , trang đang tải.

Nếu tôi mở ảnh từ dòng thời gian trong Facebook, hình ảnh đang tải, thay đổi url và Firefox sẽ hiển thị bánh xe quay để hiển thị, hình ảnh đang tải trong nền.

Tôi cũng muốn bánh xe quay đó!

Answer 1

Vâng, yêu cầu không đồng bộ sẽ biết nội dung nào đó đang được tải. Bạn sẽ chỉ phải truyền bá sự kiện ở nơi khác. Ví dụ, sử dụng móc beforeSend:

$.ajax('/your_stuff', 
     beforeSend: function() { 
     $(document).trigger('loading'); 
     } 
     ....) 

và sau đó:

$(document).on('loading', function() { alert("request is loading");} 

tôi sẽ tư vấn cho bạn để kích hoạt sự kiện này cùng một lúc bạn cập nhật URL của bạn với các API lịch sử.

Answer 2

Tôi giả định từ các thẻ bạn đang sử dụng jQuery cho AJAX của bạn. Bạn có thể sử dụng bộ xử lý AJAX toàn cầu như $.ajaxStart() và $.ajaxComplete() Đây sẽ bắn bất kể nơi bạn gọi một phương pháp ajax trong mã của bạn

$('#myLoadingDiv').ajaxStart(toggleLoading).ajaxComplete(toggleLoading); 

function toggleLoading(){ 
    $(this).toggle(); 
} 

tham khảo API http://api.jquery.com/ajaxStart/

Tôi nghĩ rằng từ ngữ câu hỏi của bạn mà bạn muốn để có thể kiểm soát hình ảnh tải trên chính tab trình duyệt thực. Bạn không thể kiểm soát điều đó. Sử dụng hình ảnh hoặc văn bản trong trang riêng của bạn cũng là rõ ràng hơn để người dùng

EDIT Bạn phải cung cấp hình ảnh động tải của riêng bạn trong một phần tử với id=myLoadingDiv cho mã này để làm việc

Answer 3

Tôi tìm thấy câu trả lời trong những câu hỏi:

How to have AJAX trigger the browser's loading

var i = $('<iframe>'); 
console.log(i); 
i.appendTo('body'); 
function start() { 
    i[0].contentDocument.open(); 
    setTimeout(function() { 
     stop(); 
    }, 1000); 
} 
function stop() { 
    i[0].contentDocument.close(); 
    setTimeout(function() { 
     start(); 
    }, 1000); 
} 

start(); 

Nguồn: jsFiddle

Tập lệnh tạo iframe, được kích hoạt bởi ajax.start & ajax.stop-event.