2011-01-20 69 views
0

我將獲得大量圖像並試圖找到最有效的方式來存儲這些圖像以保持頁面的快速。什麼是最有效的方式來存儲圖像? HTML/CSS/JS

到目前爲止,我只想到了兩種方法:使用javascript加載,例如picture = new Image(); picture.src = "file.jpg";,並根據需要在頁面上添加/刪除,或加載到<img>並設置display:none

還有其他選擇嗎?什麼被認爲是最好的方式來做到這一點?

回答

2

相片庫的最佳方式(如果多數民衆贊成你正在建設),通常是有圖像的多種尺寸,至少有兩個:

  1. 一個短小的尺寸是高度壓縮的,因此有佔用空間小:這是您加載到網格並顯示在網頁中的圖像e多個圖像
  2. 壓縮程度較低,圖像質量較高的較大圖像 - 這是您在人們希望查看詳細信息時顯示的圖像。

由於人們經常從那裏小/快裝版本已經顯示一個頁面來詳細的圖像,因此已經在瀏覽器緩存中,你做一個小動作,並有瞬間的照片,不預加載任何東西。

它是這樣的:

在詳細信息頁顯示您在具有較大詳細版本尺寸圖像標記高度壓縮的小圖片。然後使用new Image()加載更大的詳細版本,並附帶onload事件,該事件將圖像標記的來源與小型壓縮版本更改爲大型詳細版本。

它看起來很棒,工作速度快,用戶會愛你;)

PS:存儲圖像的最佳方法是在瀏覽器的緩存,而不是JS或DOM,所以如果你真的想預先載入圖像,這通常是一種不好的做法(有時候可能是必要的),讓瀏覽器在後臺爲你提供一個css文件,引用它們的樣式不適用於你網站的可視區域。

0

最好是使用JavaScript,然後根據需要將它添加到DOM,而不是先將它添加到DOM然後隱藏它,因爲DOM操作要慢得多,而且您可能會不使用一些圖像

1

我不確定「高效」,但最合乎邏輯的方式是不使用JavaScript加載圖像(如果您禁用JavaScript,則無法使用)或將圖像設置爲隱藏顯示屬性(同樣,瀏覽器可能只是加載圖像)。

因此,一個合理的建議是使用枯燥的舊分頁和每頁顯示'n'圖像。但是,爲了使其更新,您可以使用「lazy」(a.k.a.「deferred」)加載並在用戶滾動時通過Ajax加載其他頁面內容。然而,這是關鍵,這緩慢下降到「分頁」標準的行爲,如果JavaScript被禁用等等

的這種操作最好的例子是谷歌的image search,如果你search here on StackOverflow你看到的可能實現,等等的討論。

相關問題