Rails在不崩潰的情況下加載較大的外部圖像

Question

我有一個XML引用，引用了相當大的外部圖像文件（200kb）。它們導致真正的加載時間過長，從而導致頁面崩潰。在一個div中，我加載了20個像這樣的圖像。每個div都在單獨的部分中加載。這些部分（product _item）需要40-400毫秒才能加載（！），主要是因爲大圖像。

外部圖像需要是外部的（所以任何AWS解決方案）都不起作用。

的「慢部分」是摺疊的下方，可以很容易地隱藏「直到需要」。

<div id="slow-portion"> 
<% @product.each do |product| %> 
<%= render 'product_item' %> 
<% end %> 
</div> 

我剛剛實施，我認爲會解決這個問題的圖像（http://www.appelsiini.net/projects/lazyload）的延遲加載，但它似乎像頁面仍然會等到一切都被加載（包括大型圖像文件），它顯示的頁面之前。每個product_item的加載時間仍然相同。

這是已經非常令人沮喪，所以我想知道，在相當一般來講，我應該怎麼解決這個問題。

1. 是否有可能在Rails中超時部分。即如果「慢速部分」在3秒內未加載，它不應該顯示？
2. 圖像的延遲加載是否應該解決這類問題？即這是我應該解決問題的麻煩嗎？
3. 我可以解決這個頁面的慢部分的Ajax加載？基本上，該部分將顯示一個「等待符號」，直到「慢速部分」完全加載完畢？
4. 是否有任何其他方式不會導致崩潰（503錯誤）和超時由於視圖加載時間太大？

的任何解決方案，將工作是爲我好！

Answer 1

我從來沒見過的圖像的請求阻止加載一個頁面，但如果應用程序被掛起來努力使這些泛音，你真的不能找到一種方法，試圖加快速度，那麼你可以嘗試loading each of those partials using jQuery。這可能只是setup a route that serves out those partials without any layout html around it。

如果有一噸的產品，我也不會在同一時間獲取所有的人。所以你必須實現一些能夠節制所有這些ajax調用的東西。

然後，您可以添加一個css類到其中部分即將呈現的位置的父div（類似.loading），並添加樣式以指示正在加載某個東西。在你的ajax請求完成該部分後被調用的函數中，你可以從該元素中移除該類.loading。

但是你的問題對我來說似乎有點奇怪。你的部分對他們來說沒有太大的幫助，所以我希望他們能夠在毫秒內完成渲染。到服務器，這些圖像只是<img/>標籤與其中的網址。它根本不應該嘗試渲染圖像。這是瀏覽器的工作。然後，當瀏覽器獲取頁面時，它將看到這些<img/>標記源URL，並且它將在加載頁面的其餘部分時異步獲取這些圖像。

通常情況下，如果這些圖像是隻是出奇的大，而瀏覽器是無法從它被賦予的網址，以獲取它，然後你會看到那個小破圖像圖標，而不是。