pause_load_when_scrolling.md

Pause loading of images when list scrolling

Translations: 简体中文

Important

Required import sketch-extensions-view or sketch-extensions-compose module

Enabling asynchronous thread loading of images during list scrolling will reduce UI fluency. Therefore, pausing image loading during list scrolling can significantly improve performance on devices with poor performance UI fluency

Configure

First add a scroll listener to your list control, as follows:

// RecyclerView
recyclerView.addOnScrollListener(PauseLoadWhenScrollingMixedScrollListener())

// ListView
listView.setOnScrollListener(PauseLoadWhenScrollingMixedScrollListener())

// Compose LazyColumn
@Composable
fun ListContent() {
    val lazyListState = rememberLazyListState()
    LaunchedEffect(lazyGridState.isScrollInProgress) {
        PauseLoadWhenScrollingDrawableDecodeInterceptor.scrolling =
            lazyGridState.isScrollInProgress
    }

    LazyColumn(state = lazyListState) {
        // Draw your item
    }
}

Then register the PauseLoadWhenScrollingDrawableDecodeInterceptor request interceptor as follows:

/* Register for all ImageRequests */
class MyApplication : Application(), SketchFactory {

    override fun createSketch(): Sketch {
        return Sketch.Builder(this).apply {
            components {
                addDrawableDecodeInterceptor(PauseLoadWhenScrollingDrawableDecodeInterceptor())
            }
        }.build()
    }
}

/* Register for a single ImageRequest */
imageView.displayImage("https://www.sample.com/image.jpg") {
    components {
        addDrawableDecodeInterceptor(PauseLoadWhenScrollingDrawableDecodeInterceptor())
    }
}

Note: PauseLoadWhenScrollingDrawableDecodeInterceptor is only valid for DisplayRequest

Finally, enable the pause loading function during list scrolling for a single request, as follows:

imageView.displayImage("https://www.sample.com/image.jpg") {
    pauseLoadWhenScrolling(true)
}