如何在頁面之間顯示頁面加載

我不確定所有Rails應用程序的行爲是否相同，還是隻在我的應用程序設置中。對於我的應用程序，當一個頁面正在加載（所以當點擊一個鏈接，直到內容從服務器響應的那一刻），沒有任何頁面加載的跡象。一般來說，在網頁加載過程中，網頁上會有一個旋轉輪，代表網頁正在加載。我正在使用Rails 4.0.0 on Heroku。如何在頁面之間顯示頁面加載

來源

2015-07-19 Quin

並非所有瀏覽器都顯示s Ame頁面加載指標。最近版本的Safari填充地址欄背景顏色，Chrome（v43）爲*標籤* favicon（而不是地址欄favicon）等動畫。如果頁面加載正確，則不太可能成爲Rails問題，並且更接近「瀏覽器UX 「區別。 – elithrar

Rails默認使用turbolinks。

請看看turbolinks以及它是如何工作的。它基本上替代了頁面的主體而不是發出新的請求，這就是爲什麼你在瀏覽器中看不到加載指示的原因。

如果你想看到你的頁面加載，你可以禁用turbolinks，從application.js中刪除它，或使用像這樣的gem：https://github.com/caarlos0/nprogress-rails來顯示頁面的實際加載。

我強烈建議你保持turbolinks和去與我給你的第二個選項。

來源

2015-07-19 20:33:43 coorasse

嗨@coorasse，謝謝您花時間瞭解我的問題並提供如此全面的答案！第二種選擇是提供一些JS加載效果，它可以讓你控制加載的樣子。然而，是否有一種方法可以簡單地讓瀏覽器像普通網站一樣運行（Chrome會在左下方加載消息並在favicon中旋轉輪子）？ – Quin

爲了回到標準行爲，你必須去除turbolinks – coorasse

這些網站大多數時間稱爲單頁應用程序。這些網站使用了很多基於AJAX的內容獲取機制，這與前端編程有關，後端編程也有一些。

如果你真的想要實現這個功能，你可以使用AngularJS，BackboneJS和其他支持單頁面Web應用程序的框架。

當您獲取另一個頁面表單服務器時，您的所有HTML，CSS和JS都消失了，並且新內容被提取並呈現。因此，除非您使用基於AJAX的頁面，否則無法在兩者之間顯示加載頁面。

來源

2015-07-19 20:17:43

他有完全相反的問題。 – coorasse

從Turbolinks，有點像？

$document.on('page:fetch', function() { 
    // show spinner 
}); 

$document.on('page:change', function() { 
    // hide spinner 
});

更新Turbolinks 5

對於Turbolinks 5：

$document.on('turbolinks:click', function() { 
    // show spinner 
}); 

$document.on('turbolinks:load', function() { 
    // hide spinner 
});

如果你正在使用jQuery和你的微調是在div.spinner，您可以顯示與隱藏：

$(document).on("turbolinks:click", function(){ 
    $(".spinner").show(); 
}); 

$(document).on("turbolinks:load", function(){ 
    $(".spinner").hide(); 
});

來源

2015-07-19 21:38:33 daslicious

如何在頁面之間顯示頁面加載

回答

相關問題