Method for realizing page expandability dynamic interaction effect based on Intersection Observer

Abstract

According to the method, a browser IntersectionObserver API is packaged and called to create an observer object, observe an intersection of elements and a viewport to work, so that elements entering and leaving the viewport are automatically monitored, and 1) loading of elements with identified specified styles to realize a customized dynamic effect and 2) triggering of a customized callback function to support user-defined event extension, such as a user-defined event extension function and a customized event extension function. When the method is applied to an official website product page, a developer does not need to write a monitoring event of a corresponding element to trigger a required dynamic effect when each carousel picture and product display loads and loads out dynamic effects, and dynamic effect display can be triggered only by adding a triggering identifier of a tool class and transmitting the triggering identifier into a callback function.

Description

Technical Field

[0001] The present invention relates to the field of computer front-end web technology, and in particular to a method for realizing a page extensible dynamic interaction effect based on IntersectionObserver API. Background Art

[0002] With the rapid development of single-page applications (SPA) and front-end development, dynamic loading of website content and optimization of user experience are becoming more and more important. The traditional dynamic effect loading event handling method has performance deficiencies, especially when the page scrolling frequency is high, especially when dealing with a large number of DOM elements, which may cause performance problems such as page freezes or delays. In addition, for the efficiency of page resource loading, it is unnecessary to load all resources or add monitoring events to handle dynamic effects before the user actually sees the content, resulting in a waste of network bandwidth and longer initial loading time. Previously, developers usually used third-party libraries or manually implemented lazy loading, often relying on monitoring page scrolling events to determine whether the position of the observed element appears in the viewport. However, these methods are not efficient and complex.

[0003] The emergence of the IntersectionObserver API solves these problems. It aims to detect the intersection of elements with the viewport in a more efficient way. It can provide this information asynchronously when the user scrolls or adjusts the view. IntersectionObserver is a callback-based mechanism. Developers can define the conditions that trigger observations (such as thresholds). When the specified element intersects the viewport, the API will call these callback functions asynchronously. In this way, developers can focus on their business logic without worrying about performance issues. The IntersectionObserver API solves the challenges of performance and resource management in front-end development by providing an efficient and easy-to-use interface, making an important contribution to the improvement of modern web applications and user experience. Summary of the invention

[0004] This invention introduces a method for automatically triggering the display effect of specific elements in a page by observing the page scrolling. The core idea is to use the IntersectionObserver API tool to monitor whether the page elements enter or exit the visible area. The specific process is as follows: Listening to page scrolling and element states: As the user scrolls the page, IntersectionObserver detects when specific elements on the page appear in the viewport (the area visible to the user) and when they leave.

[0005] Trigger dynamic display effects: When an element enters the viewport, the system triggers an effect (such as fade-in, sliding, and other visual effects) to make the element more eye-catching. These effects can be controlled and displayed through CSS styles.

[0006] Batch processing of multiple elements: This method can be applied to multiple elements, not just a single element. For example, many images or text blocks on a page can be configured to automatically display effects when they enter the viewport.

[0007] Optimize performance: To avoid performance waste, this method stops monitoring an element when it leaves the window, thereby reducing unnecessary calculation consumption.

[0008] A method for realizing dynamic effects of a page based on IntersectionObserver, comprising the following steps: Step 1: Encapsulate the IntersectionObserver API and create an observer object; Step 2: Observe the intersection between all observed objects and the viewport, and trigger the dynamic effect of each observed object entering or leaving the viewport through a user-defined callback function.

[0009] Furthermore, step 1 also includes initializing a root node according to the parent container of each observed object, so as to control the scope of observation and its corresponding display dynamic effect.

[0010] Furthermore, step 2 also includes: when the intersection range between the observed object and the viewport reaches a set threshold, triggering a corresponding callback event to control the timing of triggering the dynamic effect.

[0011] Furthermore, in step 2: dynamically modify the CSS style or add / remove class names through the callback function, thereby achieving a dynamic display effect on the observed object.

[0012] Furthermore, step 2 also includes setting a one-time trigger option to trigger the dynamic effect only once after the observed object enters the viewport.

[0013] A computer-readable storage medium storing one or more programs, wherein the one or more programs include instructions, characterized in that when the instructions are executed by a computing device, the computing device performs the method described.

[0014] A device for realizing dynamic effects of a page based on IntersectionObserver, comprising: Initialization module, a module used to create and initialize IntersectionObserver instances; A monitoring module, used to observe the intersection between the observed object and the viewport; The callback module is used to trigger dynamic effects when each observed object enters or leaves the viewport through a user-defined callback function.

[0015] Furthermore, the initialization module also includes a root node selection module for defining the parent container where the observed object is located, and supporting different observed objects to realize customized observation and callback function settings according to different viewports and scenes.

[0016] Furthermore, the monitoring module also includes: Batch processing module, used to dynamically load and display multiple observed objects in batches; The unbinding module is used to release the observation of the observed object when it no longer needs to trigger dynamic effects, thereby reducing performance overhead.

[0017] Furthermore, the callback module also includes a delay processing module, which is used to add a delay to trigger a callback function of a leaving event when the observed object leaves the viewport. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 It is a structural diagram of the present invention based on the encapsulation of IntersectionObserver tool class observeViewUitl.

[0019] Figure 2 This is a workflow diagram of the observeViewUitl tool class in an embodiment of the present invention.

[0020] Figure 3 It is a schematic diagram of the analysis of the intersection of the observer instance monitoring element and the viewport in the embodiment of the present invention. DETAILED DESCRIPTION

[0021] The embodiments of the present invention are described below. The embodiments described in the drawings are exemplary and are only used to explain the present invention, but should not be interpreted as limiting the present invention.

[0022] The specific implementation is as follows: Development and deployment in Vue+vite+ts front-end framework: The system is configured to develop large-screen display pages, product introduction pages, advertising pop-up pages, etc. There are a large number of page elements waiting for developers to achieve different dynamic effects and user page interaction experience; Predefine page dynamic effect styles according to page dynamic display requirements, support implementation in multiple language formats such as Css, Scss, Less, Sass, and support the introduction of public style files; Create the tool class observeViewUitl.js (see the structure Figure 1), encapsulates some of the functions of IntersectionObserver, see the specific workflow Figure 2 : In observeViewUitl.js tool class, the start function start() is first defined, where the global variables defined before the assignment are initialized (the element array to be observed elArray_, the parent container or the root node root_, and the listening element configuration item options are defined); According to business needs, pass in the specified root element root, the intersection ratio value of the listening target and the bounding box. The threshold is usually in array form. If you want to be able to perceive each time the visibility of the target element exceeds each 25% mark backward or forward (see Figure 3 ), you can set the threshold array such as threshold: [0, 0.25,0.5, 0.75, 1]; Then start to create the observation object instance observerInstance__, start business processing through the parameters entries of the callback function, and execute the callback when entering or leaving the specified visual area through the element's isIntersecting. Here, two methods are added to support dynamic style expansion. First, adjust the style by directly modifying the element's classList, such as calling entry.target.classList.add('show-XXX') to trigger the corresponding animation style; second, by judging whether the specified callback inCallBack_ and outCallBack exist, if so, call and execute the modified function inCallBack_(entry.target) and inCallBack_(entry.target); The encapsulation definition disconnect() is used to trigger the stop of all element observation operations in the unmounted or beforeDestroy callback of the life cycle when leaving the page. It is mainly used to avoid the problems of conflict of elements with the same name or event coverage when triggering the start observation function when switching multiple pages; Define the unobserve(el_) function to be called when an element on the same page leaves the viewport or to be manually specified to cancel observation. It supports passing the parameter el_ to specify the element to cancel observation or traversing all elements to be observed and canceling observation. The specific page introduces the tool class startup and destruction: Import the encapsulated object observe into the vue page that needs to be referenced; import { observeUtil} from ' / @ / utils / observeViewUtil.js' According to the interactive requirements of dynamic effects on the page, define the inCallBack and outCallBack callback functions and mount them in the mounted function; Simple mode, by default, triggers the CSS style on the element and calls the start function (no parameters, single isOnce parameter): onMounted(() => { / / Start monitoring observeUtil.start() / / Start monitoring, and stop observing after a single trigger observeUtil.start(false) }); Supplementary mode, supports custom callbacks, and customizes inCallBack and outCallBack parameters to pass into the start function according to user business needs; onMounted(() => { / / Callback when entering the viewport const inCallBack = (target_)=>{ target_.style.display = 'flex' target_.classList.add('XXX') ... }; / / Callback when leaving the viewport const outCallBack = (target_)=>{ target_.style.display = 'none' target_.classList.removeClass('XXX').add('disabled'); ... }; / / Start monitoring observeView.start(false, inCallBack, outCallBack) }); When switching or leaving the destruction page component, call disconnect to stop listening; onUnmounted(() =>{ / / Stop monitoring observeView.disconnect() }) Depending on the specific page business, you can call unobserve to stop observing the specified element whenever needed; observeView.unobserve(target_el); Based on the same technical solution, the present invention also discloses a computer-readable storage medium storing one or more programs, wherein the one or more programs include instructions, which, when executed by a computing device, enable the computing device to execute the method for realizing page scalable dynamic interaction effects based on the IntersectionObserver API in the above-mentioned computing power network.

[0023] Based on the same technical solution, the present invention also discloses a computing device, including one or more processors, one or more memories and one or more programs, wherein the one or more programs are stored in the one or more memories and are configured to be executed by the one or more processors, and the one or more programs include a method for executing the above-mentioned computing power network based on the IntersectionObserver API to realize the scalable dynamic interaction effect of the page.

[0024] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0025] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0026] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0027] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0028] The above embodiments are only for illustrating the technical idea of ​​the present invention, and cannot be used to limit the protection scope of the present invention. Any changes made on the basis of the technical solution in accordance with the technical idea proposed by the present invention shall fall within the protection scope of the present invention.

Claims

1. A method for realizing page dynamic effects based on IntersectionObserver, comprising the following steps: Step 1. Encapsulate the IntersectionObserver API and create an observer object; Step 2: Observe the intersection between all observed objects and the viewport, and trigger the dynamic effect of each observed object entering or leaving the viewport through a user-defined callback function.

2. The method according to claim 1, characterized in that Step 1 also includes initializing the root node according to the parent container of each observed object, so as to control the scope of observation and its corresponding display dynamic effect.

3. The method according to claim 1, characterized in that Step 2 also includes: When the intersection range between the observed object and the viewport reaches the set threshold, the corresponding callback event is triggered to control the timing of triggering the dynamic effect.

4. The method according to claim 1, characterized in that: In step 2: Dynamically modify CSS styles or add / remove class names through callback functions to achieve dynamic display effects on the observed objects.

5. The method according to claim 1, characterized in that Step 2 also includes setting a one-time trigger option to trigger the dynamic effect only once after the observed object enters the viewport.

6. A device for realizing dynamic effects of a page based on IntersectionObserver, comprising: Initialization module, a module used to create and initialize IntersectionObserver instances; A monitoring module, used to observe the intersection between the observed object and the viewport; The callback module is used to trigger dynamic effects when each observed object enters or leaves the viewport through a user-defined callback function.

7. The device according to claim 6, characterized in that The initialization module also includes a root node selection module, which is used to define the parent container where the observed object is located, and supports different observed objects to realize customized observation and callback function settings according to different viewports and scenes.

8. The device according to claim 6, characterized in that The monitoring module also includes: Batch processing module, used to dynamically load and display multiple observed objects in batches; The unbinding module is used to release the observation of the observed object when it no longer needs to trigger dynamic effects, thereby reducing performance overhead.

9. The device according to claim 6, characterized in that The callback module also includes a delay processing module, which is used to add a delay to trigger a callback function of a leaving event when the observed object leaves the viewport.

10. A computer-readable storage medium storing one or more programs, wherein the one or more programs include instructions, characterized in that: When the instructions are executed by a computing device, the computing device is caused to perform the method according to any one of claims 1 to 5.

Images