避免從服務器反覆重複圖像

我是網頁設計的新手。如果我的理解錯誤，請糾正我。我正在尋求建議，以避免在以下情況下瀏覽器和服務器之間的往返。避免從服務器反覆重複圖像

想象的JavaScript首先下載從服務器中所有30〜50幅圖像。這些圖像然後用於構建縮略圖圖像，每個圖像尺寸爲60px x 60px左右，供用戶選擇。這種效果是用CSS和一些免費提供的JavaScript庫實現的。

縮略圖像一個被點擊後，javasrcipt然後放在一個更大的畫布圖像。較大圖像的尺寸根據其原始尺寸約900px X 600px或更大來確定。爲了獲得圖像的原始大小，我類似的代碼如下因素在客戶端的JavaScript：

var img=new Image(); 
img.src="uploaded1.jpg"; 
var w,h; 
w=img.width; 
h=img.height;

我的問題是，這樣的設計顯得非常低效在交通方面，因爲每個圖像將被下載3次：

爲JavaScript代碼之後渲染到圖像庫
在img.src="uploaded1.jpg";
大尺寸圖像的描繪執行DOM節點已經由JavaScript添加後：<img src="uploaded1.jpg" alt="big image"/>

此外，我想允許用戶隨時上傳更多圖片並將這些圖片添加到圖片庫中。爲了實現這一點，一些JavaScript的設計必須準確地下載相同的圖像，這同一個瀏覽器剛剛上傳到服務器，從服務器，以便它們可以被添加到DOM這樣的：

<img src="new1.jpg" alt="new image 1"/> 
<img src="new2.jpg" alt="new image 2"/>

是什麼對我來說沒有意義的是這些圖像所產生的瀏覽器和服務器之間的往返旅程。當瀏覽器獲得這些圖像的第一手信息時，瀏覽器顯然不需要從服務器重新加載相同的圖像。

因爲它是這些上傳圖像文件和渲染圖像相同的瀏覽器，理論上應該存在某種方式告訴瀏覽器重複使用這些圖片 - 前或在上傳之後使它們。該頁面必須設計爲以這種低效率的方式工作，這僅僅是因爲在HTML世界中，JavaScript無法通過操作DOM將內存中的圖像傳送到瀏覽器。

SVG的local IRI reference可能會有所幫助。我可以在<defs>好嗎實施<image>元素，但我不知道瀏覽器（IE 9尤其是）將再次每到這個<image>被其他元素引用時盲目檢索服務器相同的圖像。關於SVG的啓示將不勝感激。

我也讀過關於http /瀏覽器緩存的文章，並且得到了瀏覽器緩存不可靠的印象，因爲用戶可以手動禁用緩存，並且緩存大小對於大量圖像可以設置得太小。此外，高速緩存機制無法消除不必要的往返行爲，如前面提到的「上傳然後下載圖像添加到圖庫」場景。

順便說一句，一晃就是我想學習和使用的最後一件事。

最好的問候，

enter code here

來源

2010-10-02 Masao Liu

我不知道，但我想告訴瀏覽器重用形象的最佳方式就是不要改變它的文件名，也不是文件本身。應該每次使用相同的路徑訪問它。隨後對同一個文件的請求應該導致從瀏覽器的緩存中獲取文件，對吧？達到此目的的方法是使用文件命名算法，爲相同的圖像/縮略圖始終提供同一個名稱。如果您上傳文件，由於文件名通常不同，因此AFAIK文件不在瀏覽器緩存中，因此必須下載一次。在我的實踐中，瀏覽器緩存通常是過度熱情並緩存太多數據（這導致修改通過AJAX加載的文件時出現問題，緩存應明確禁用以進行測試並啓用生產）。您是否使用FireBug和Chrome資源跟蹤器測試過您的網站？

順便說一句，我希望你不要在服務器上呈現更大的圖像。這可能是相當無效的，特別是如果經常進行。畫布對象爲大多數基本的圖像處理任務提供了許多快速簡單的方法，因此加載的唯一圖像應該是之前上傳的圖像。服務器端應該做的唯一事情就是縮小比例。在客戶端直接執行它是不可能的，因爲瀏覽器無法從遠程站點訪問本地文件。來自該規則的每個例外應該被報告爲主要的錯誤。

{full size user file} - > {server} - > {scaled down} - > {client}似乎是不可避免的。

來源

2010-10-02 19:35:05 Harry

避免從服務器反覆重複圖像

回答

相關問題