如何在Jetpack Compose中使用Coil 2.0预加载图片并无卡顿展示

核心逻辑 #

不用纠结rememberPainter()、手动绑定ImageView这些过时或者错误的思路。Coil 2.0的Compose组件和ImageLoader的内存缓存是默认打通的：预加载的本质是提前把图片解码、存入内存缓存，后续展示时只要请求参数匹配缓存key，AsyncImage会直接从内存读Bitmap渲染，完全跳过网络请求、磁盘IO、图片解码的耗时步骤，不会出现UI卡顿。

具体实现步骤 #

• 预加载不需要自定义加载目标，直接向ImageLoader入队请求即可，注意预加载请求和后续展示的请求配置必须完全一致，否则内存缓存key不匹配，预加载不生效。
• 预加载基础代码示例：

// 注意：预加载和后续图片展示必须用同一个ImageLoader实例，默认取全局实例即可
val imageLoader = LocalContext.current.imageLoader

/**
 * 预加载图片
 * @param model 图片数据源（url/uri/资源id均可）
 * @param cacheKey 统一内存缓存key，避免参数差异导致key不匹配
 * @param requestConfig 额外请求配置，和后续展示用的配置保持完全一致
 */
fun preload(
    model: Any,
    cacheKey: String,
    requestConfig: (ImageRequest.Builder.() -> Unit)? = null
) {
    val request = ImageRequest.Builder(LocalContext.current)
        .data(model)
        .memoryCacheKey(cacheKey)
        .apply { requestConfig?.invoke(this) }
        .build()
    imageLoader.enqueue(request)
}

• 列表场景下的预加载+展示示例（以LazyColumn为例）：

val imageList = remember { /* 你的图片数据源 */ }
LazyColumn(
    modifier = Modifier.fillMaxSize()
) {
    itemsIndexed(imageList) { index, item ->
        // 提前预加载当前项之后2个位置的图片，保证滑动到对应位置时图片已经在内存里
        LaunchedEffect(index) {
            val preloadIndex = index + 2
            if (preloadIndex < imageList.size) {
                val preloadItem = imageList[preloadIndex]
                preload(
                    model = preloadItem.url,
                    cacheKey = preloadItem.url,
                    // 这里的配置要和下面AsyncImage的配置完全一致
                    requestConfig = {
                        size(Size.ORIGINAL)
                        transformations(CircleCropTransformation())
                        scale(Scale.FILL)
                    }
                )
            }
        }

        // 正常展示图片，配置和预加载完全对齐
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(item.url)
                .memoryCacheKey(item.url)
                // 和预加载保持完全相同的配置
                .size(Size.ORIGINAL)
                .transformations(CircleCropTransformation())
                .scale(Scale.FILL)
                .build(),
            contentDescription = null,
            modifier = Modifier
                .fillMaxWidth()
                .height(240.dp)
        )
    }
}

常见踩坑说明 #

• 不需要手动使用rememberAsyncImagePainter管理绘制对象，AsyncImage内部已经做了缓存命中优化，命中内存缓存时会同步渲染，无加载延迟
• 不需要传ImageView作为预加载的target，调用enqueue时不传target，Coil会自动将解码完成的图片存入内存缓存，完全满足预加载需求
• 若使用自定义ImageLoader，必须保证预加载和图片展示用的是同一个实例，不同实例的内存缓存是隔离的
• 如果需要验证预加载是否生效，可以给ImageLoader添加EventListener，判断加载来源：如果来源是MemoryCache说明预加载生效，直接渲染无卡顿；如果来源是磁盘/网络，说明两边请求参数不一致，缓存key不匹配，需要对齐配置。

内容的提问来源于stack exchange，提问作者Elisabeth Huhn