Force Coil Compose to load directly on remember the image-CodePudding

I have a pager (Accompanist) with image that are get from web with Coil in Compose.

The rememberPainter() seem to only call the request when the Image composable is shown for the first time.

So when I slide page in the pager, the Image show only at that moment and so we have to wait a moment.

Any way to force the rememberPainter (Coil) to preload ?

Edit 1 :

Here is a simple version of my implementation (with lots of stuff around removed but that had no impact on the result) :

@Composable
private fun Foo(imageList: List<ImageHolder>) {
    if (imageList.isEmpty())
        return

    val painterList = imageList.map {
        rememberImagePainter(
            data = it.getDataForPainter(),
            builder = {
                crossfade(true)
            })
    }

    ImageLayout(imageList, painterList)
}

@Composable
fun ImageLayout(imageList: List<ImageHolder>, painterList: List<Painter>) {
    HorizontalPager(
        count = imageList.size,
        modifier = Modifier.fillMaxWidth(),
    ) { page ->
        Image(
            painter = painterList[page],
            "",
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(
                    imageList[page].colorAverage
                ),
            contentScale = ContentScale.Crop
        )
    }
}

I tried with having directly the rememberImagePainter at the Image too just in case. But the problem is clearly that Image() of page 2, 3, 4 isn't rendered so Image don't do the call to the painter. I tried to look how it work inside but couldn't find.

Edit 2 : I found a workaround but it's not clean

for (painter in painterList) 
    Image(painter = painter, contentDescription = "", modifier = Modifier.size(0.001.dp))

It force coil to load image and with a size really small like 0.001.dp (with 0 it don't load). Also the problem is that in the builder you need to force a size or it will just load one pixel, so I force the full size of image as I don't know what size would have been available for the image.

CodePudding user response：

In the Coil documentation there is a section about preloading. Depending on your architecture, you can do this in different places, the easiest is to use `LaunchedEffect':

val context = LocalContext.current
val imageLoader = LocalImageLoader.current
LaunchedEffect(Unit) {
    val request = ImageRequest.Builder(context)
        .data("https://www.example.com/image.jpg")
        // Optional, but setting a ViewSizeResolver will conserve memory by limiting the size the image should be preloaded into memory at.

        // For example you can set static size, or size resolved with Modifier.onSizeChanged
        // .size(coil.size.PixelSize(width = 100, height = 100))

        // or resolve display size if your images are full screen
        // .size(DisplaySizeResolver(context))

        .build()
    imageLoader.enqueue(request)
}

CodePudding user response：

           Image(
                modifier = Modifier
                    .fillMaxWidth(0.3f)
                    .height(100.dp),
                painter = rememberImagePainter(
                    data = img,
                    builder = {
                        crossfade(true)
                        placeholder(R.drawable.place_holder)
                        scale(Scale.FILL)
                    }
                ),
                contentDescription = "food image",
                contentScale = ContentScale.Crop,
            )

I load image like this, and set placeHolder too