在過去幾周,我們已經看了當加載和顯示圖像時如何優化用戶體驗的方式。對于流暢的用戶體驗來說,緩存和圖像優先級已經邁出了一大步。然而,如果圖像是非常大的,處理的過程需要一段時間才能顯示。在這篇博客中,我們會探討縮略圖作為另一個優化選項。
**縮略圖優勢?**
在你要用縮略圖去做優化之前,確保你理解和掌握了所有[緩存](https://futurestud.io/blog/glide-caching-basics)的選項和[請求優先級](https://futurestud.io/blog/glide-request-priorities)。如果你已經實現了這些,再來查看縮略圖是否能幫助更好的提高你的 Android 應用。
縮略圖不同于[之前博客](https://futurestud.io/blog/glide-placeholders-fade-animations)提到的占位符。占位符必須附帶應用程序捆綁的資源才行。縮略圖是動態占位符。它也可以從網絡中加載。縮略圖將會在實際請求加載完或者處理完之后才顯示。如果縮略圖對于任何原因,在原始圖像到達之后,它不會取代原始圖像。它只會被抹除。
**提示:另外一個流暢加載圖片過程的真的很棒的方式是用色彩圖像占位符的圖像背景的主色彩作為圖像。我們也為此寫了一個[指南](https://futurestud.io/blog/how-to-get-dominant-color-code-for-picture-with-nodejs)。**
**簡單的縮略圖?**
Glide 為縮略圖提供2個不同的方式。第一個是簡單的選擇,在原始圖像被用過之后,這只需要一個較小的分辨率。這個方法在 `ListView`的組合和詳細視圖中是非常有用的。如果你已經在 `ListView` 中顯示了圖像。這么說吧,在250x250 像素的中,圖像將在詳細視圖中需要一個更大的分辨率圖像。然而,從用戶的角度來看,他已經看到較小版本的圖像,為什么在詳情頁中出現一個占位符顯示了幾秒,然后相同圖像又再次一次顯示(高分辨率的)?
在這種情況下,它有更好的意義去繼續顯示這張 250x250 像素版本的圖像在詳情視圖上,并且后臺去加載全分辨率的圖像。Glide 的 `.thumbnail()` 方法讓這一切成為可能。 在這樣的情況下,這個參數是一個 `float` 作為其大小的倍數。
~~~
Glide
.with( context )
.load( UsageExampleGifAndVideos.gifUrl )
.thumbnail( 0.1f )
.into( imageView2 );
~~~
例如, 你傳了一個 `0.1f` 作為參數,Glide 將會顯示原始圖像的10%的大小。如果原始圖像有 1000x1000 像素,那么縮略圖將會有 100x100 像素。因為這個圖像將會明顯比 `ImageView` 小很多,你需要確保它的 [ScaleType](https://developer.android.com/reference/android/widget/ImageView.ScaleType.html?hl=zh-cn) 的設置是正確的。
請注意,將應用于演示請求的所有請求設置也應用于縮略圖。比如,如果你使用了一個變換去做了一個圖像灰度。這同樣將發生在縮略圖中。
**用完全不同的請求去進階縮略圖?**
然而用 float 參數來使用 `.thumbnail()` 是易于設置且非常有效,但它不總是有意義的。如果縮略圖是要通過網絡去加載相同的全分辨率的圖像,則可能不會很快。所以,Glide 提供了另一個選項去加載和顯示縮略圖。
第二個選擇是傳一個完全新的 Glide 請求作為參數。讓我們來看看實例:
~~~
private void loadImageThumbnailRequest() {
// setup Glide request without the into() method
DrawableRequestBuilder<String> thumbnailRequest = Glide
.with( context )
.load( eatFoodyImages[2] );
// pass the request as a a parameter to the thumbnail request
Glide
.with( context )
.load( UsageExampleGifAndVideos.gifUrl )
.thumbnail( thumbnailRequest )
.into( imageView3 );
}
~~~
所不同的是,第一個縮略圖請求是完全獨立于第二個原始請求的。該縮略圖可以是不同的資源或圖片 URL,你可以為其應用不同的轉換,等等。
**提示,如果你想要更加瘋狂,你可以遞歸并應用一個額外的縮略圖請求去請求縮略圖。**
**Outlook?**
這篇博客為你展示兩種不同的方法用 Glide 去為圖像加載縮略圖。做應用優化的時候不要忘記這個選項!它可以在你的應用中明顯的幫你減少空的 `ImageView` 時間。如果你有問題,在評論中讓我們知道
下周,我們將看看用 Glide 做圖片加載,但目標不是一個 `ImageView`。敬請關注!
- 前言
- 一開始
- 二加載進階
- 三ListAdapter(ListView, GridView)
- 四占位符 和 漸現動畫
- 五圖片重設大小 和 縮放
- 六顯示 Gif 和 Video
- 七緩存基礎
- 八請求優先級
- 九縮略圖
- 十回調:SimpleTarget 和 ViewTarget 用于自定義視圖類
- 十一加載圖片到通知欄和應用小部件中
- 十二異常:調試和錯誤處理
- 十三自定義轉換
- 十四用 animate() 自定義動畫
- 十五集成網絡棧
- 十六用 Module 自定義
- 十七Module 實例:接受自簽名證書的 HTTPS
- 十八Module 實例:自定義緩存
- 十九Module 實例:用自定義尺寸優化加載的圖片
- 二十動態使用 Model Loader
- 二十一如何旋轉圖像
- 二十二系列綜述