以下是通过实例讲解 Glide 加载缩略图的常见应用场景，涵盖快速预览、渐进式加载和性能优化，帮助开发者提升用户体验并降低流量消耗。
Glide 缩略图核心机制
Glide 支持两种缩略图模式：
1. 比例缩略图：快速加载原图的低分辨率版本（如 10% 尺寸）。
2. 独立缩略图：同时加载另一张缩略图（如不同 URL 的小图）。
场景 1：快速显示低分辨率预览
需求：优先加载原图的低分辨率缩略图，再加载高清图（如社交平台图片流）。
实现：通过 thumbnail(0.1f) 加载原图 10% 的缩略图。
Glide.with(context)
.load("https://example.com/high-res.jpg")
.thumbnail(0.1f) // 原图 10% 的缩略图
.into(imageView)
效果：用户会先看到模糊的缩略图，随后自动过渡到高清图。
场景 2：独立缩略图 + 高清图
需求：同时加载独立的缩略图和高清图（如相册应用）。
实现：通过 thumbnail() 加载另一张图片作为缩略图。
Glide.with(context)
.load("https://example.com/high-res.jpg") // 高清图 URL
.thumbnail(
Glide.with(context)
.load("https://example.com/thumbnail.jpg") // 缩略图 URL
.override(200, 200) // 限制缩略图尺寸
)
.into(imageView)
优势：缩略图和高清图可来自不同数据源（如 CDN 的不同尺寸图片）。
场景 3：点击缩略图加载高清大图
需求：点击缩略图后弹出高清大图（如电商商品详情）。
实现：分步加载，先显示缩略图，点击后加载原图。
// 步骤1：加载缩略图到小视图
Glide.with(context)
.load("https://example.com/thumbnail.jpg")
.override(200, 200)
.into(smallImageView)
// 步骤2：点击后加载高清图到大视图
smallImageView.setOnClickListener {
Glide.with(context)
.load("https://example.com/high-res.jpg")
.transition(DrawableTransitionOptions.withCrossFade()) // 渐变动画
.into(largeImageView)
}
场景 4：列表滑动时优先加载缩略图
需求：在 RecyclerView 滑动时优先加载小图，停止时加载高清图。
实现：结合 thumbnail() 和滚动监听优化。
// Adapter 中的 onBindViewHolder
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
Glide.with(context)
.load(fullImageUrls[position])
.thumbnail(0.2f) // 加载 20% 缩略图
.into(holder.imageView)
}
// RecyclerView 滚动状态监听
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
// 停止滑动时加载高清图
Glide.with(context).resumeRequests()
} else {
// 滑动时仅加载缩略图
Glide.with(context).pauseRequests()
}
}
})
场景 5：错误回退时显示缩略图
需求：高清图加载失败时，保留已加载的缩略图。
实现：通过 error() 设置缩略图为错误占位符。
Glide.with(context)
.load("https://example.com/high-res.jpg")
.thumbnail(
Glide.with(context)
.load("https://example.com/thumbnail.jpg")
.override(200, 200)
)
.error(
Glide.with(context)
.load("https://example.com/thumbnail.jpg") // 错误时显示缩略图
.override(200, 200)
)
.into(imageView)
场景 6：本地资源缩略图
需求：加载本地大图前，先显示低分辨率版本（如相册预览）。
实现：使用本地资源 ID 作为缩略图。
Glide.with(context)
.load(File("/sdcard/large-image.jpg")) // 本地大图
.thumbnail(
Glide.with(context)
.load(R.drawable.local_thumbnail) // 本地小图
.override(100, 100)
)
.into(imageView)
场景 7：视频封面缩略图
需求：加载视频前显示首帧缩略图（如视频播放器）。
实现：通过 FrameMetadataRetriever 获取视频首帧。
// 自定义 ModelLoader 获取视频首帧（需集成额外库）
class VideoThumbnailLoader : ModelLoader<Uri, InputStream> {
override fun buildLoadData(uri: Uri, width: Int, height: Int, options: Options): LoadData<InputStream>? {
return LoadData(ObjectKey(uri), VideoThumbnailFetcher(uri))
}
override fun handles(uri: Uri): Boolean = uri.path?.endsWith(".mp4") ?: false
}
// 注册到 GlideModule
@GlideModule
class AppModule : AppGlideModule() {
override fun registerComponents(context: Context, glide: Glide, registry: Registry) {
registry.append(Uri::class.java, InputStream::class.java, VideoThumbnailLoader.Factory())
}
}
// 使用
GlideApp.with(context)
.load(videoUri)
.thumbnail(0.1f) // 视频首帧缩略图
.into(imageView)
性能优化技巧
-
缓存策略：
.diskCacheStrategy(DiskCacheStrategy.AUTOMATIC) // 默认自动缓存 .skipMemoryCache(true) // 缩略图跳过内存缓存 -
尺寸限制：
.override(500, 500) // 限制高清图解码尺寸 -
线程优化：
.thumbnail(Glide.with(context).load(url).submit(100, 100)) // 子线程加载缩略图
总结：场景与方案对照表
| 场景 | 技术方案 |
|---|---|
| 快速预览 | thumbnail(0.1f) |
| 独立缩略图源 | thumbnail(Glide.load(thumbnailUrl)) |
| 点击加载高清图 | 分步加载 + transition() |
| 列表滑动优化 | thumbnail() + 滚动监听 |
| 错误回退 | error() 中嵌套缩略图请求 |
| 本地资源缩略 | 本地资源 ID + override() |
| 视频封面加载 | 自定义 ModelLoader + 首帧提取 |
通过合理使用缩略图功能，可以在保证视觉效果的同时显著提升加载速度和用户体验。建议在图片密集型场景（如相册、电商列表）中优先采用缩略图策略。
当前文章价值7.77元，扫一扫支付后添加微信提供帮助！（如不能解决您的问题，可以申请退款）
评论已关闭！