Image Component Causes Lag When Loading Images

#harmonyos #arkui #listcomponentimagescrollinglag #sourcesize

Read the original article：Image Component Causes Lag When Loading Images

Problem Description

When using the List component to load a list of images, the page scrolling becomes severely laggy.

Sample code:

List({ space: 10 }) { ForEach(this.imgList, (url: string) => { ListItem() { Image(url) .width(144) .height(108) .objectFit(ImageFit.Cover) .borderRadius(8) }; }, (url: string) => url); }

Background Knowledge

When loading image resources, if the source image size is larger than the target display size, you can use the sourceSize property to set the decoding size of the image or use the autoResize property to automatically scale the image during decoding. This ensures the image is displayed at the desired size without unnecessary overhead.

Troubleshooting Process

Observed that the images in the list have inconsistent sizes and aspect ratios.
Replacing them with images of similar sizes significantly reduced the lag.
Further testing showed that controlling image resolution and keeping dimensions consistent improved scrolling performance.

Analysis Conclusion

The lag is caused by high-resolution images consuming excessive memory during decoding and rendering, which leads to page stuttering when scrolling.

Solution

Two approaches can be used to fix the lag issue:

1. Use sourceSize to decode the image at the target size:

List({ space: 10 }) { ForEach(this.imgList, (url: string) => { ListItem() { Image(url) .width(144) .height(108) .objectFit(ImageFit.Cover) .borderRadius(8) .sourceSize({  width: 30, height: 30 }) }; }, (url: string) => url); }

2. Enable autoResize to allow automatic scaling and resolution reduction:

List({ space: 10 }) { ForEach(this.imgList, (url: string) => { ListItem() { Image(url) .width(144) .height(108) .objectFit(ImageFit.Cover) .borderRadius(8) .autoResize(true) }; }, (url: string) => url); }

Verification Result

After applying either sourceSize or autoResize, the scrolling experience in the image list became smooth, and memory usage was reduced without noticeable impact on visual quality.

DEV Community