7

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.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
Melio500
  • 309
  • 3
  • 9
  • As per my experience, coil would cache the image so well that even after app-destruction and re-creation, the cached image exists, I do not even need to be connected to the internet to have it rendered. – Richard Onslow Roper Oct 16 '21 at 18:27
  • Just post your implementation, preferably some levels of parent containers so that we can dig the problem out. – Richard Onslow Roper Oct 16 '21 at 18:27
  • @MARSK I added a sample of my code to reproduce the problem. But the problem is clearly that the Image() of other page isn't showed so the request of the coil painter isn't made – Melio500 Oct 16 '21 at 20:15
  • @MARSK also the problem isn't about the cache, image I load can change a lot and are randomly showed here. From what I saw the cache work perfectly. – Melio500 Oct 16 '21 at 20:17

2 Answers2

11

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

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()
    context.imageLoader.enqueue(request)
}

Before version 2.0.0 use LocalImageLoader.current instead of context.imageLoader to get the image loader.

Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
  • And then what am I supposed to do to actually load the prefetched image? – pollux552 Jun 23 '22 at 09:58
  • @pollux552 use any of Coil ways to load image in Compose, check out [documentation](https://coil-kt.github.io/coil/compose/). – Phil Dukhov Jun 23 '22 at 11:35
  • I still can't figure it out. I have the LaunchedEffect block you mentioned and then my code is like this: item.photos.forEachIndexed { index, url -> if (index == photoIndex) { AsyncImage( model = url, contentDescription = null, contentScale = ContentScale.Crop, modifier = Modifier .fillMaxSize() .clip(RoundedCornerShape(10.dp)) ) } } And it will just make a new request, instead of using the image from the cached/prefetched from the launchedeffect block – pollux552 Jun 23 '22 at 12:08
  • 1
    @pollux552 `LaunchedEffect` is just a sample of how it can be used in Compose: to make it work `LaunchedEffect` should be launched before `AsyncImage` appears so it have time to pre-load. You can also do same request in a view model. – Phil Dukhov Jun 23 '22 at 12:12
  • @PhilDukhov, yep, the LauchedEffect thing is confusing:) – nutella_eater Aug 25 '23 at 14:45
0

Here is full code for accompanist pager with coil preloading and indicator with video example

tasjapr
  • 632
  • 4
  • 13