緩存圖像

假設我有web應用，其中有1000張圖像等，緩存圖像

<img src="something" /> 
<img src="something" /> 
<img src="something" /> 
. 
. 
. 
<img src="something" />

這使得頁面加載慢，作爲每個圖像從請求檢索和顯示的頁面。

我的問題是，是否有任何其他方式來減少頁面加載時間。

我試過的是我試圖用base64編碼這些圖像，但它增加了網頁的大小。

任何指導，幫助表示讚賞。

來源

2014-09-11 oyks

現在很多網站只有在用戶滾動某個點時纔會開始渲染屏幕外圖片，甚至點擊「更多」按鈕等。或者，您可以使用AJAX調用以異步方式加載它們。 – ne1410s 2014-09-11 12:15:52

[http://www.codeproject.com/Articles/22888/Caching-Images-in-ASP-NET](http://www.codeproject.com/Articles/22888/Caching-Images-in-ASP-NET ） – 2014-09-11 12:16:29

你試圖解決的問題究竟是什麼？圖像是否從每個*請求重新加載到同一用戶的頁面上？（在這種情況下，緩存是一種選擇。）或者你是在談論一個緩慢的*初始*頁面加載？（在這種情況下，緩存將無法幫助，因爲瀏覽器尚不知道圖像。）否，更改編碼將不會執行任何操作。您仍然需要將數據從服務器傳輸到客戶端，但實際上沒有辦法。 – David 2014-09-11 12:18:09

Yahoo!爲網站提供了一個很好的優化技術列表。檢查這個鏈接（https://developer.yahoo.com/performance/rules.html）

在你的情況1000頁的圖像是一個頁面很多。考慮將頁面分成多個頁面並讓用戶使用分頁切換頁面。

如果一切都必須在同一頁上，則考慮延遲加載。只有在加載html後才能加載圖像。這可以結合加載滾動，如ne1410s建議。隨着用戶向下滾動，新圖像被加載。（這裏有一個http://www.appelsiini.net/projects/lazyload）

考慮優化您的網站在其他領域以及（它會給你額外的表現）。例如，在用戶瀏覽器中緩存圖像。當他們返回您的網站時，這些圖片不會再從您的服務器上下載。

來源

2014-09-11 12:20:42

考慮延遲加載，圖片只會按需加載（當頁面滾動時）。

Scott Hanselman作出an interesting article關於他如何使用懶惰加載程序在雲中省錢。

簡單的解決方法是在用戶滾動時延遲加載圖像，因此僅對所看到的圖像使用帶寬。我看了一下Mike的 Tupola的jQuery LazyLoad插件以及其他一些類似的腳本。還有Luis Almeida的輕量級Unveil，如果你想減少花裏胡哨的話。我最終使用了標準的Lazy Load。

延遲加載庫是非常容易使用，例如：

<script> 
    $(function() { 
     $("img.lazy").lazyload({effect: "fadeIn"}); 
    }); 
</script>

除此之外確保所有的圖像都爲Web優化，尺寸/質量是正確的，使用精靈，如果你的圖像是靜態和緩存。

來源

2014-09-11 12:31:56 glautrou

如果您顯示超過1000張圖片，您的設計中出現錯誤。沒有充分的理由在一個頁面或最初的頁面上顯示1000多張圖片。

來源

2014-09-11 12:45:53

回答

相關問題