harmony 鸿蒙Optimizing the Page Flash During the Redirection
Optimizing the Page Flash During the Redirection
When an application uses a router such as the Navigation component to navigate to a Web component page, the bottom of the page may flash during web page loading, which affects user experience.
Causes
When a router such as the Navigation component is used to navigate to a Web component page, the application determines whether to hide the native navigation bar on the application side based on the callback notification of the web page. If it decides to hide the native navigation bar, the layout of the Web component is adjusted accordingly. The layout adjustment process can be simplified into the following four phases:
Description of the four phases in the figure (from left to right):
The application is routed to the web page. The top of the page is the native navigation bar, and the bottom is the Web component. In this case, the web page can be loaded properly.
During web page loading, the system invokes a callback to notify the application to hide the native navigation bar and switch to the navigation bar on the web page. In this case, the native navigation bar is hidden, and the layout of the Web component is adjusted accordingly. The background color of the Web component is initially displayed at the bottom of the page. Assume that the background color is gray.
The web page continues to be loaded and displayed based on the new size. The background color of the HTML web page is presented first, which is assumed to be white.
Finally, the web page content is completely loaded, and the complete HTML web page content is displayed.
In the preceding process, if the background color of the Web component is different from that of the web page, there is a possibility that the Web component flashes during the redirection. The flash probability depends on the complexity of the web page and network conditions.
Optimization
Set the background color of the Web component to be the same as the background color of the web page to avoid visual flash and improve user experience. For example, you can set the background color of the Web component to white, as shown in the preceding figure.
In similar cases, for example, when the default background color of the Web component is white, if the background color of the web page is gray, the web page may flash white when the application navigates to a new web page. To solve this problem, set the background color of the Web component to gray.
Example of setting the background color of the Web component to gray (the default background color is white):
Web({ src: $rawfile('xxx.html'), controller: this.webController})
.backgroundColor(Color.Gray)
你可能感兴趣的鸿蒙文章
harmony 鸿蒙Taking Over the Media Playback on Web Pages
harmony 鸿蒙Mutual Invoking Between the Application and the Frontend Page (C/C++)
harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page (C/C++)
harmony 鸿蒙Enabling Ads Blocking
harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page
harmony 鸿蒙Migrating Web Components Between Different Windows
harmony 鸿蒙Introduction to ArkWeb
- 所属分类： 后端技术
- 本文标签：
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦