CN115237502A - Method for loading animation and preventing frequent flicker - Google Patents
Method for loading animation and preventing frequent flicker Download PDFInfo
- Publication number
- CN115237502A CN115237502A CN202210911221.9A CN202210911221A CN115237502A CN 115237502 A CN115237502 A CN 115237502A CN 202210911221 A CN202210911221 A CN 202210911221A CN 115237502 A CN115237502 A CN 115237502A
- Authority
- CN
- China
- Prior art keywords
- animation
- loading
- counter
- request
- hidden
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a method for loading animation and preventing frequent flicker, which comprises the following steps: step 1, introducing a counter; step 2, placing the hidden animation loading method in a macro queue; an event loop mechanism is utilized, a method for displaying and loading the animation and an interface request method are placed in a main thread, and a method for hiding and loading the animation is placed in a macro queue; step 3, reducing the times of displaying and hiding the loaded animation by using a counter; when entering the interface processing method, if the counter is 0, executing a method for displaying and loading the animation once; when the macro queue task is executed, if the counter is 0, the hidden loading animation method is executed once. According to the method, the execution times of the hidden animation loading method are reduced to serve as a technical optimization direction, the execution times of redundant events can be greatly reduced, and the performance and the user experience are obviously improved.
Description
Technical Field
The invention belongs to the technical field of software management, and particularly relates to a method for preventing frequent flashing during animation loading.
Background
At present, in a scene of processing multi-interface calling, the problem of frequent flashing of loaded animation generally exists in an internet product.
What is flickered is that when an interface is entered, for each display content, a display loading animation and a hidden loading animation exist, a plurality of interfaces are requested in the first page, the response time of each interface is fast or slow, and the flickering of the loading animation is also caused.
Further, route hopping refers to hopping from one address to another, resulting in page re-rendering. When the routing jump occurs in the middle of the interface of the continuous request, the situations of page rendering and loading flicker inevitably occur; in the process of requesting access, because the host requesting to access the URL has concurrency and connection number limitation, the browser puts the current request into a queue for queuing, thereby causing request blocking and causing flicker; the current processing mode is to process an interface method to define a mask flag, the mask flag refers to a generic masking layer, the mask flag can be set to be false to hide and load the animation when the interface is called, and in the interfaces continuously requested, some of the interfaces set the mask flag to be false, which is also the reason for causing the loading of the animation to flicker.
To this end, how to eliminate the frequent flickers of the animation is a problem to be faced in various software applications.
Disclosure of Invention
In order to solve the above problems, a primary object of the present invention is to provide a method for preventing frequent flashing for loading an animation, which is a novel general solution for front-end interface processing, and can greatly reduce the flashing times of loading the animation in a scenario of processing multi-interface calls, thereby solving the problem of frequent flashing of loading the animation.
The invention relates to a method for loading animation and preventing frequent flicker, which takes the execution times of a hidden animation loading method as a technical optimization direction, can greatly reduce the execution times of redundant events, and obviously improves the performance and the user experience.
The frequent flashing of the loaded animation is mainly caused by executing the hidden loaded animation method for multiple times, so that the execution times of the hidden loaded animation method is reduced to be used as a technical optimization direction,
in order to achieve the above object, the technical solution of the present invention is as follows.
A method for loading an animation to prevent frequent flicker, the method comprising the steps of:
step 1, introducing a counter;
the initialized loading counter is 0, +1 when the interface request starts, and-1 when the interface request ends or an error is reported. And when the counter is larger than 1, showing the loading animation, and being equal to 0 to hide the loading animation.
Step 2, placing the hidden animation loading method in a macro queue;
and (3) placing the method for displaying and loading the animation and the interface request method in the main thread and placing the method for hiding and loading the animation in the macro queue by using an event loop mechanism. The message has to wait for the main thread to request the message to be processed by a plurality of interfaces, and then the hidden loading animation method is processed.
And 3, reducing the times of displaying and hiding the loaded animation by using a counter. When entering the interface processing method, if the counter is 0, executing the display loading animation method once. When the macro queue task is executed, if the counter is 0, the hidden loading animation method is executed once.
Further, in step 2, two parameters are accepted by the function setTimeout: a message to be added to the queue and a time value, which defaults to 0, represents the minimum delay time for the message to be actually added to the queue.
If there are other messages in the queue, the setTimeout message must wait for the other messages to be processed before processing the message to be added to the queue.
Further, in step 3, the number of times of showMask () and hideMask () is reduced by using a counter,
when entering the interface processing method, if the counter is 0, executing one showing loading animation showMask ();
when the macro queue task is executed, if the counter is 0, hidden loading animation hideMask () is executed once.
The invention has the beneficial effects that:
1. the execution times of the hidden loading animation method are reduced, the execution times of redundant events can be greatly reduced, and the performance is obviously improved;
2. the front-end wind control capability can be globally improved;
3. the code modification amount is small, the realization is easy, and the influence range is wide;
4. the method can be applied to all products, and the products comprise various channels H5, weChat small programs, clients and background management systems.
Drawings
FIG. 1 is a schematic diagram of placing a hidden loaded animation in a macro queue, according to an embodiment of the present invention.
FIG. 2 is a diagram of the number of times animation is loaded using counter reduction and hiding implemented by the present invention.
FIG. 3 is a diagram illustrating the reduction of the number of times of executing the unwanted events according to the present invention.
FIG. 4 is a schematic diagram of the hidden loading animation method implemented by the present invention for reducing the number of times of executing the redundant events.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
Fig. 1 shows a method for loading animation to prevent frequent flicker, which is implemented by the present invention, and the method comprises the following steps:
step 1, introducing a counter;
the initialized load counter is 0, +1 when the interface request starts, and-1 when the interface request ends or an error is reported.
And when the counter is larger than 1, showing the loading animation, and being equal to 0 to hide the loading animation.
Step 2, placing the hidden animation loading method in a macro queue; as shown in the figure 2 of the drawings,
and (3) placing the animation display loading method and the interface request method in the main thread and placing the hidden animation loading method in the macro queue by using an event loop mechanism. The message has to wait for the main thread to request the message to be processed by a plurality of interfaces, and then the hidden loading animation method is processed.
Two parameters are accepted with the function setTimeout: messages to be enqueued and a time value, which defaults to 0, represents the minimum delay time for a message to be actually enqueued.
If there are other messages in the queue, the setTimeout message must wait for the other messages to be processed before processing the message to be added to the queue.
And 3, reducing the times of displaying and hiding the loaded animation by using a counter.
When entering the interface processing method, if the counter is 0, executing the display loading animation method once. When the macro queue task is executed, if the counter is 0, the hidden loading animation method is executed once. Specifically, the number of times of showsack () and hideMask () is reduced by a counter, as shown in fig. 3;
when entering the interface processing method, if the counter is 0, executing one showing loading animation showMask ();
when the macro queue task is executed, if the counter is 0, hidden loading animation hideMask () is executed once.
Specifically, the implementation steps are as follows:
101. initializing a counter to be 0;
102. carrying out an interface request;
103. invoking an interface request method sendAjax ();
104. initializing display, and loading an animation identifier mask flag;
105. judging whether the mask flag is true, if so, carrying out the next step, and otherwise, turning to the step 107;
106. adding 1 to a counter, and executing a showMask () method for displaying and loading the animation;
107. creating an axios instance, packaging the axios instance into a request () interface request method, and calling the request ();
108. judging whether the request () method reports an error, if so, carrying out the next step, otherwise, turning to the step 110;
109. judging whether the mask flag is true, if so, subtracting 1 from the counter, and then completing a request () method; otherwise, the direct request () method; after the request () method is completed, go to step 114;
110. completing the request () method;
111. judging whether the mask flag is true, if so, subtracting 1 from the counter, otherwise, turning to step 114;
112. creating a macro task, and judging whether a counter is less than or equal to 0; if yes, the next step is executed, otherwise, the step 114 is executed;
113. resetting the counter to be 0, and executing hidden loading animation hideMask ();
114. the sendAjax () method is completed.
Through the processing, the execution times of the hidden animation loading method are reduced to serve as the technical optimization direction, the execution times of redundant events can be greatly reduced, and the performance is obviously improved, as shown in FIG. 4; let x be the number of interfaces of continuous requests, before optimization, the total number of execution times of showMask (), request () and hideMask () events is (3 x), after optimization, it is (x + 2), and the reduction execution proportion is:
the results show that as the number of request interfaces approaches 13, the number of execution events is reduced from 39 to 15, for a total reduction of 62% of the number of execution events.
Because the animation display and hidden loading times are realized through the counter, the invention can globally improve the front-end wind control capability, and before optimization: frequent flicker can cause the covering layer to be frequently lost, the misoperation of a user is easily caused, and after optimization: the method can avoid the misoperation of a user caused by frequent loss of the covering layer.
Moreover, the counter is adopted, so that the code modification amount is small, the realization is easy, and the influence range is wide. In the project processed by the uniform interface, the code transformation amount does not exceed 10 lines of codes, and the optimized code can act on all scenes of multi-interface requests, not just the home page.
The verification proves that the method can be applied to all products, including all channels H5, weChat small programs, clients and background management.
The present invention is not limited to the above preferred embodiments, but includes all modifications, equivalents, and improvements within the spirit and scope of the present invention.
Claims (6)
1. A method for loading animation to prevent frequent flicker, comprising the steps of:
step 1, introducing a counter;
step 2, placing the hidden animation loading method in a macro queue;
an event loop mechanism is utilized, a method for displaying and loading the animation and an interface request method are placed in a main thread, and a method for hiding and loading the animation is placed in a macro queue;
step 3, reducing the times of displaying and hiding the loaded animation by using a counter;
when entering the interface processing method, if the counter is 0, executing a method for displaying and loading the animation once; when the macro queue task is executed, if the counter is 0, the hidden loading animation method is executed once.
2. The method for loading animation according to claim 1, wherein in step 1, a loading counter is initialized to 0, the interface request starts +1, the interface request ends or an error time is reported as-1. And when the counter is larger than 1, showing the loading animation, and being equal to 0 to hide the loading animation.
3. The method for loading animation as claimed in claim 1, wherein in step 2, the message must wait for the main thread to request the message to be processed by multiple interfaces, and then the hidden loading animation method is processed.
4. The method for loading moving pictures to prevent frequent flicker as claimed in claim 3, wherein in step 2, two parameters are accepted by using the function setTimeout: a message to be added to the queue and a time value, the default of which is 0, representing the minimum delay time for the message to be actually added to the queue;
if there are other messages in the queue, the setTimeout message must wait for the other messages to be processed before processing the message to be added to the queue.
5. The method for loading animation to prevent frequent flicker as recited in claim 1, wherein in step 3, the number of times of showing loading animation showMask () and hiding loading animation hideMask () is decreased by using a counter,
when entering the interface processing method, if the counter is 0, executing one showing loading animation showMask ();
when the macro queue task is executed, if the counter is 0, hidden loading animation hideMask () is executed once.
6. The method for loading animation to prevent frequent flashing as recited in claim 1, wherein the steps of:
101. initializing a counter to 0;
102. carrying out an interface request;
103. calling an interface request method sendAjax ();
104. initializing display, and loading an animation identifier mask flag;
105. judging whether the mask flag is true, if so, carrying out the next step, otherwise, turning to the step 107;
106. adding 1 to a counter, and executing a showMask () method for displaying and loading the animation;
107. creating an axios instance, packaging the axios instance into a request () interface request method, and calling a request ();
108. judging whether the request () method reports errors, if so, carrying out the next step, otherwise, turning to the step 110;
109. judging whether the mask flag is true, if so, subtracting 1 from the counter, and then completing a request () method; otherwise, the direct request () method; go to step 114 after completing the request () method;
110. completing the request () method;
111. judging whether the mask flag is true, if so, subtracting 1 from the counter, otherwise, turning to step 114;
112. creating a macro task, and judging whether a counter is less than or equal to 0; if yes, the next step is executed, otherwise, the step 114 is executed;
113. resetting the counter to be 0, and executing hidden loading animation hideMask ();
114. the sendAjax () method is completed.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210911221.9A CN115237502B (en) | 2022-07-30 | 2022-07-30 | Method for loading animation to prevent frequent flicker |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210911221.9A CN115237502B (en) | 2022-07-30 | 2022-07-30 | Method for loading animation to prevent frequent flicker |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115237502A true CN115237502A (en) | 2022-10-25 |
| CN115237502B CN115237502B (en) | 2023-08-29 |
Family
ID=83677864
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210911221.9A Active CN115237502B (en) | 2022-07-30 | 2022-07-30 | Method for loading animation to prevent frequent flicker |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115237502B (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020062386A1 (en) * | 2000-11-01 | 2002-05-23 | Christopher Piche | Method and apparatus for improving real time and/or interactive animation over a computer network |
| CN103810737A (en) * | 2012-11-14 | 2014-05-21 | 腾讯科技（深圳）有限公司 | Method and device for realizing animations in MVC mode |
| CN107122192A (en) * | 2017-04-27 | 2017-09-01 | 北京三快在线科技有限公司 | Webpage view methods of exhibiting, device, computing device and storage medium |
| CN109840114A (en) * | 2017-11-24 | 2019-06-04 | 阿里巴巴集团控股有限公司 | Page processing method and mobile terminal |
| CN111752435A (en) * | 2020-06-24 | 2020-10-09 | 北京小鸟科技股份有限公司 | Multimedia and multi-file multimedia real-time rendering method, system and device |
| CN112149039A (en) * | 2020-10-13 | 2020-12-29 | 四川长虹电器股份有限公司 | Method for increasing front-end webpage loading speed |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103530898B (en) * | 2013-01-06 | 2017-04-05 | Tcl集团股份有限公司 | A kind of animation processing method and system based on 3D real-time renderings |
| CN113157366A (en) * | 2021-04-01 | 2021-07-23 | 北京达佳互联信息技术有限公司 | Animation playing method and device, electronic equipment and storage medium |
| CN113599814B (en) * | 2021-08-12 | 2023-10-24 | 上海米哈游璃月科技有限公司 | Animation role display method, device, equipment and medium |
-
2022
- 2022-07-30 CN CN202210911221.9A patent/CN115237502B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020062386A1 (en) * | 2000-11-01 | 2002-05-23 | Christopher Piche | Method and apparatus for improving real time and/or interactive animation over a computer network |
| CN103810737A (en) * | 2012-11-14 | 2014-05-21 | 腾讯科技（深圳）有限公司 | Method and device for realizing animations in MVC mode |
| CN107122192A (en) * | 2017-04-27 | 2017-09-01 | 北京三快在线科技有限公司 | Webpage view methods of exhibiting, device, computing device and storage medium |
| CN109840114A (en) * | 2017-11-24 | 2019-06-04 | 阿里巴巴集团控股有限公司 | Page processing method and mobile terminal |
| CN111752435A (en) * | 2020-06-24 | 2020-10-09 | 北京小鸟科技股份有限公司 | Multimedia and multi-file multimedia real-time rendering method, system and device |
| CN112149039A (en) * | 2020-10-13 | 2020-12-29 | 四川长虹电器股份有限公司 | Method for increasing front-end webpage loading speed |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115237502B (en) | 2023-08-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6874149B1 (en) | Hooking of replacement and augmented API functions | |
| US20230244537A1 (en) | Efficient gpu resource allocation optimization method and system | |
| JPH0827775B2 (en) | Method and system for calling processing procedure from remote node | |
| CN111625289B (en) | Method and device for quickly starting application program and electronic equipment | |
| US20230403437A1 (en) | Graphics engine and graphics processing method applicable to player | |
| CN111274044B (en) | GPU (graphics processing unit) virtualized resource limitation processing method and device | |
| CN114022344A (en) | Linux server-based Android container rendering resource sharing method and device | |
| CN115237502A (en) | Method for loading animation and preventing frequent flicker | |
| CN113835854A (en) | Task processing method and device | |
| CN106095548B (en) | Method and device for distributing interrupts in multi-core processor system | |
| US9021239B2 (en) | Implementation of multi-tasking on a digital signal processor with a hardware stack | |
| JP2009516296A (en) | Asynchronous just-in-time compilation | |
| CN115268916B (en) | Dynamic form implementation method and system based on low-code development platform | |
| CN110532030B (en) | Method for optimizing register access in CPU | |
| CN113190276A (en) | Intelligent virus scanning processing method and device | |
| CN111897667A (en) | Asynchronous communication method and device based on event driving and lua corotation | |
| CN114579242A (en) | Page layout information determination method and device | |
| CN112667324B (en) | Method and device for calling command class in command mode | |
| CN117828205A (en) | Front-end page message monitoring method | |
| KR102632507B1 (en) | Method and system for processing video for streaming service | |
| EP3923136A1 (en) | Hardware-accelerated computing system | |
| CN114817166B (en) | Method, device and medium for canceling file operation | |
| CN117687763B (en) | High concurrency data weak priority processing method and device, electronic equipment and storage medium | |
| CN116820791A (en) | Parallel computing method and system based on Feign asynchronous call | |
| CN114281747A (en) | Network communication method of ceph cluster, storage medium and processor |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20221207 Address after: J30, Room 1101, Floor 11, Nansha Financial Building, No. 171, Haibin Road, Nansha District, Guangzhou, Guangdong, 510000 (for office use only) Applicant after: China post consumer finance Co.,Ltd. Address before: Room 2004, Block 2, No. 91, Yushan Avenue, Panyu District, Guangzhou, Guangdong 510000 Applicant before: Guo Fusheng |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |