How to resolve the screen flickering issue when the splash screen background and the startWindowIcon property are set to the same image?

#harmonyos #syncload #startwindowicon #appstartupflicker

Read the original article：How to resolve the screen flickering issue when the splash screen background and the startWindowIcon property are set to the same image?

Question

When the startup page background and the startWindowIcon attribute in module.json use the same image, the app needs to load the same image twice during startup. This causes a flashing effect on the screen, resulting in an unsmooth transition between the launch window and the app’s main page.

Short Answer

To avoid the flashing issue, replace the background image of the Column component with an Image component and set the image loading mode to synchronous. This ensures that the image is loaded immediately and displayed smoothly during the app startup process.

@Entry
@Component
struct WhitePage {
  aboutToAppear(): void {
    setTimeout(() => {
    }, 10 * 1000);
  }

  build() {
    Stack() {
      Image($r('app.media.startIcon')) // This image is used as an example
        .width('50%')
        .height('50%')
        .opacity(0.2)
        .syncLoad(true); // Set image to load synchronously
      Text('Hello Word');
    }
    .width('100%')
    .height('100%');
  }
}

Applicable Scenarios

When the startup page background and the launch window icon (startWindowIcon) are the same image.
When you want to eliminate flickering or flashing transitions between the launch window and the first page of the app.
When a smooth visual experience is required during app startup.