Jetpack Compose中Accompanist Pager的Coil图片如何实现预加载？

方案1：使用Coil官方预加载API（推荐） #

Coil的ImageLoader原生提供预加载能力，不需要依赖UI组件触发，你可以直接在初始化阶段预加载指定路径的图片，还能指定目标加载尺寸，避免加载出不符合预期大小的资源。预加载后的资源会直接存入Coil的缓存，后续Image组件调用时会直接读取缓存，不会重复发起请求。
代码示例：

@Composable
private fun Foo(imageList: List<ImageHolder>) {
    if (imageList.isEmpty()) return
    val imageLoader = LocalImageLoader.current
    // 预先计算Image实际展示的尺寸，和后面Image组件的尺寸保持一致
    val targetSize = remember {
        val density = LocalDensity.current
        val screenWidth = Resources.getSystem().displayMetrics.widthPixels // 对应fillMaxWidth
        val imageHeight = with(density) { 200.dp.toPx() }.toInt()
        Size(screenWidth, imageHeight)
    }
    // 页面初始化时批量触发预加载
    LaunchedEffect(imageList) {
        imageList.forEach { imageHolder ->
            val preloadRequest = ImageRequest.Builder(LocalContext.current)
                .data(imageHolder.getDataForPainter())
                .size(targetSize) // 指定和实际展示一致的尺寸，避免加载缩略图
                .build()
            imageLoader.enqueue(preloadRequest)
        }
    }
    ImageLayout(imageList)
}

@Composable
fun ImageLayout(imageList: List<ImageHolder>) {
    HorizontalPager(
        count = imageList.size,
        modifier = Modifier.fillMaxWidth(),
    ) { page ->
        val painter = rememberImagePainter(
            data = imageList[page].getDataForPainter(),
            builder = {
                crossfade(true)
            }
        )
        Image(
            painter = painter,
            contentDescription = "",
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(imageList[page].colorAverage),
            contentScale = ContentScale.Crop
        )
    }
}

这个方案灵活度高，可自定义预加载的数量、时机，不会额外生成无用UI节点，性能损耗更低。

方案2：调整HorizontalPager离屏渲染数量 #

如果你的图片总数量不多（比如少于10张），可以直接修改HorizontalPager的offscreenLimit参数，设置需要提前渲染的离屏页面数量，Pager会提前渲染对应页面的Image组件，自然触发Coil的加载逻辑，代码改动最小：

HorizontalPager(
    count = imageList.size,
    modifier = Modifier.fillMaxWidth(),
    offscreenLimit = 2 // 提前渲染当前页前后各2页，可按需调整
) { page ->
    // 原有Image逻辑保持不变
}

如果图片数量较多，这个方案会提前渲染大量页面，增加内存占用，仅适合小批量图片场景。

如果你要沿用之前的临时方案，只需要在rememberImagePainter的builder中调用size(targetSize)传入实际展示尺寸，就能避免加载出1像素缩略图的问题，但这种方式会额外生成无用的UI节点，不推荐长期使用。

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