WO2016177281A1

WO2016177281A1 - Image display method and apparatus

Info

Publication number: WO2016177281A1
Application number: PCT/CN2016/079814
Authority: WO
Inventors: 杨煜炜
Original assignee: 阿里巴巴集团控股有限公司; 杨煜炜
Priority date: 2015-05-05
Filing date: 2016-04-21
Publication date: 2016-11-10
Also published as: CN106202097A; CN106202097B

Abstract

An image display method comprises: displaying a preset element in a webpage, at least one image corresponding to the preset element being in a hidden state, and the preset element being used for displaying interactive page elements of the at least one image (S101); and displaying the at least one image corresponding to the preset element upon detection of a contact operation for the preset element (S102). Interactions between display of a webpage image and the browsing process of a user are enhanced.

Description

Picture display method and device

Technical field

The present invention belongs to the field of the Internet, and in particular, to a picture display method and apparatus.

Background technique

A browser is a piece of software that can display the contents of an HTML (HyperText Markup Language) file of a web server or file system and allow users to interact with these files. The web browser mainly interacts with the web server through the HTTP protocol and acquires web pages. These web pages are specified by a URL (Uniform Resource Locator), and the file format is usually HTML. A web page can include multiple documents, each of which is obtained separately from the server. The HTTP content type and URL protocol specification allows web page design to embed images, videos, etc. in web pages.

In Internet pages, images are increasingly used to display web content. In the existing webpage, the image is usually displayed in a tiled manner directly on the webpage, or is displayed in an area of the webpage in a centralized manner. The above display method is simply a direct display, and has nothing to do with the browsing behavior and focus of the user in the webpage, and lacks interaction with the user browsing the webpage process.

Summary of the invention

In view of this, the present application provides a picture display method and apparatus, which solves the technical problem of lack of interaction between the display of a webpage image and the browsing behavior of the user.

In order to solve the above technical problem, the present application discloses a picture display method, including: displaying a preset element in a webpage, at least one picture corresponding to the preset element is in a hidden state, and the preset element is used for An interactive page element displaying the at least one picture; after detecting a contact operation for the preset element, displaying at least one picture corresponding to the preset element.

After detecting the contact operation for the preset element, displaying at least one picture corresponding to the preset element includes: triggering a timer to calculate a first delay when the contact operation is detected; At least one map corresponding to the preset element is displayed when a delay is greater than the first preset duration a slice; or, when detecting that the contact operation has ended, triggering a timer to calculate a second delay; and when the second delay is greater than a second preset duration, displaying at least one image corresponding to the preset element Or, when it is detected that the contact operation is a continuous contact operation, the trigger timer calculates a first duration of the contact operation; when the first duration of the contact operation is greater than a third preset duration, the display and At least one picture corresponding to the preset element.

Displaying the preset element in the webpage, wherein the at least one picture corresponding to the preset element is in a hidden state comprises: setting the at least one picture to a next layer of the preset element, and being The preset element is covered; after detecting the contact operation for the preset element, displaying at least one picture corresponding to the preset element includes: moving the at least one picture to the preset element The placement is displayed, wherein the placement is on the same level of the preset element.

Displaying the preset element in the webpage, wherein the at least one picture corresponding to the preset element is in a hidden state comprises: setting the at least one picture at a display position around the preset element, and adopting transparency Setting to be in a hidden state; after detecting the contact operation for the preset element, displaying at least one picture corresponding to the preset element includes: gradually reducing transparency of the at least one picture, At least one image is displayed at the placement.

After the detecting the contact operation for the preset element, displaying at least one picture corresponding to the preset element includes: when the at least one picture is a plurality of pictures, according to the multiple pictures The display order is set to display the plurality of pictures in sequence.

The method further includes: displaying the order or the display position of the plurality of pictures, and adjusting according to a change in the order of triggering the frequency of the corresponding page from high to low.

The method further includes: when displaying at least one picture corresponding to the preset element, the trigger timer calculates a second duration that displays the at least one picture, when the second duration is greater than the fourth preset When the duration is long, the at least one picture is reset to the hidden state.

The detecting the contact operation for the preset element comprises: detecting a contact operation of the mouse with the preset element; or detecting a contact operation of the gesture with the preset element.

In order to solve the above technical problem, the present application further discloses a picture display device, including: a first display module, configured to display a preset element in a webpage, where at least one picture corresponding to the preset element is in a hidden state, The preset element is an interactive page element for displaying the at least one picture; and the second display module is configured to detect the contact operation after the preset element At least one picture corresponding to the preset element.

The second display module includes: a first timing sub-module, configured to trigger a timer to calculate a first delay when the contact operation is detected; and a first display sub-module, configured to: when the first delay is greater than the first At least one picture corresponding to the preset element is displayed when the preset time is long; or the second timing sub-module is configured to trigger the timer to calculate the second time delay when the contact operation has ended; a submodule, configured to display at least one picture corresponding to the preset element when the second delay is greater than a second preset duration; or a third timing submodule configured to detect the contact operation When the contact operation is continuous, the trigger timer calculates a first duration of the contact operation; and the third display sub-module is configured to display and display when the first duration of the contact operation is greater than the third preset duration At least one picture corresponding to the preset element.

The first display module includes: a first processing submodule, the at least one picture is disposed on a next layer of the preset element, and is covered by the preset element; the second display module includes And a fourth display sub-module, configured to move the at least one picture to a display place around the preset element for display, wherein the display position is on a same layer of the preset element.

The first display module includes: a second processing submodule, configured to set the at least one picture at a display position around the preset element, and is in a hidden state by setting a transparency; the second display The module includes: a fifth display sub-module for gradually reducing transparency of the at least one picture, and displaying the at least one picture at the display position.

The second display module includes: a sixth display sub-module, configured to display the plurality of pictures in sequence according to a preset display order of the multiple pictures when the at least one picture is a plurality of pictures.

The apparatus further includes: an adjustment module, configured to display a sequence or a display position of the plurality of pictures, adjusted according to a change in a frequency of triggering the corresponding page from high to low.

The device further includes: a timing module, configured to: when the at least one picture corresponding to the preset element is displayed, triggering a timer to calculate a second duration of displaying the at least one picture, the reset module is configured to be used When the second duration is greater than the fourth preset duration, the at least one picture is reset to the hidden state.

The second display module includes: a first detecting submodule for detecting a contact operation of the mouse with the preset element; or a second detecting submodule for detecting contact of the gesture with the preset element operating.

Compared with the prior art, the present application can obtain the following technical effects:

1) displaying a preset element for user interaction in the webpage, and detecting at least one image corresponding to the preset element when the contact operation for the preset element is detected, displaying the webpage image and the browsing process of the user Establishing connections enhances the interaction between the display of web images and the user's browsing process.

2) A variety of display effects can be set for the image hidden around the preset element, which helps to improve the user's attention to the image content and attract the user to click.

Of course, implementing any of the products of the present application necessarily does not necessarily require all of the technical effects described above to be achieved at the same time.

DRAWINGS

The drawings described herein are intended to provide a further understanding of the present application, and are intended to be a part of this application. In the drawing:

1 is a schematic flowchart of a picture display method according to an embodiment of the present application;

2(a)-(c) are schematic diagrams showing relative positions of preset elements and corresponding pictures in the embodiment of the present application;

3(a)-(b) are schematic diagrams showing relative positions of preset elements and corresponding pictures in the embodiment of the present application;

FIG. 4 is a schematic flowchart diagram of a picture display method according to an embodiment of the present application;

5(a)-(e) are schematic diagrams showing a process of triggering a picture display by a mouse according to an embodiment of the present application;

6(a)-(f) are schematic diagrams showing the process of gesture-triggered picture display in the embodiment of the present application;

FIG. 7 is a schematic structural diagram of a picture display device according to an embodiment of the present application.

detailed description

The embodiments of the present invention will be described in detail below with reference to the accompanying drawings and embodiments, in which the present invention can be fully understood and implemented by the technical means of solving the technical problems and achieving the technical effects.

1 is a schematic flowchart of a picture display method provided by an embodiment of the present application, which is applicable to the end End device, including the following steps.

In step S101, a preset element is displayed in the webpage, and at least one picture corresponding to the preset element is in a hidden state, and the preset element is an interactive page element for displaying the at least one picture.

The preset element is any one of text, picture, animation, video and link in the webpage, and can include multiple preset elements in one webpage at the same time. Each preset element corresponds to at least one picture. When the terminal device displays the webpage, the webpage includes at least one preset element. At this time, the webpage browsed by the user is the same as the existing webpage, but the user does not know which elements in the webpage are preset elements, and each pre-page in the webpage Let at least one picture corresponding to the element be hidden, and the user does not see at least one picture corresponding to each preset element. The preset element is an interactive page element capable of detecting a contact operation from the user and displaying at least one picture corresponding to the preset element, and displaying a display position corresponding to the at least one picture around the preset element, The at least one picture is displayed at the display position.

The at least one picture corresponding to the preset element is set to a hidden state, at least by the following manner.

A1. Set at least one picture to the next layer of the preset element and be covered by the preset element.

Presetting the display area of the element in the webpage, and setting at least one picture corresponding to the preset element. The display layer of the at least one picture setting is located below the display layer where the preset element is located, and thus can be covered by the preset element. For example, the display layer z-index: 0 where the preset element is located, and the display layer z-index: -1 where the at least one picture corresponding to the preset element is located, the display layer where the at least one picture is located The next layer of the layer where the preset element is located, and at least one picture corresponding to the preset element is covered by the preset element by setting the pixel point parameter. As shown in FIG. 2( a ), the web page 10 includes a preset element 11 , and the preset element 11 corresponds to the picture 110 , the picture 111 , and the picture 112 . The picture 110, the picture 111, and the picture 112 are covered by the preset element 10. A corresponding three display positions are arranged around the preset element 10, wherein the picture 110 corresponds to the display position 120, the picture 111 corresponds to the display position 121, and the picture 112 corresponds to the display position 122.

A2. Set at least one picture to the placement around the preset element and hide it by setting the transparency.

a preset position corresponding to the at least one picture is arranged around the preset element, and the preset element is corresponding to At least one picture is set at the corresponding display position, and the at least one picture is hidden by setting the transparency of the at least one picture, for example, the transparency of the at least one picture is set to 100%. As shown in FIG. 3( a ), the web page 20 includes a preset element 21 , and the preset element 21 corresponds to the picture 210 , the picture 211 , and the picture 212 . The picture 210 corresponds to the display position 220, the picture 211 corresponds to the display position 221, and the picture 212 corresponds to the display position 222. The picture 210, the picture 211, and the picture 212 are respectively set at the corresponding placement positions, and their transparency is set to 100%, so that the picture 210, the picture 211, and the picture 212 are hidden at the corresponding placement positions.

In step S102, after detecting a contact operation for the preset element, at least one picture corresponding to the preset element is displayed.

The contact operation is an interaction operation of the preset element by the user, including a contact operation of the preset element by the user's mouse and a contact operation of the user gesture with the preset element, and the user may be viewed or paid attention to during the process of browsing the webpage. Go to the preset element. Detection of this contact operation can be accomplished by detecting corresponding system events.

The user browses the webpage through the PC-side browser using a personal computer (PC). The user's operation on the webpage usually comes from a mouse operation, and the computer detects the contact operation of the mouse with the preset elements in the webpage. When the user mouse enters the display area covered by the preset element, the computer detects a mouse event for the preset element, such as a mouseover event. When the user browses the webpage using the electronic device with the touch display screen, the user's operation on the webpage usually comes from the touch operation of the user gesture on the touch display screen, and the electronic device detects the contact operation of the user gesture with the preset element. When the user gesture touches a preset element in the webpage displayed on the touch display screen, the electronic device detects a touch event of the user gesture for the preset element, such as a touchstart event.

After detecting the contact operation for the preset element, the terminal device triggers the display of the at least one picture corresponding to the preset element, and the triggering manner includes at least one of the following.

B1: The trigger timer is used to calculate the first delay when the contact operation is detected; and when the first delay is greater than the first preset duration, at least one picture corresponding to the preset element is displayed. After the terminal device detects a contact operation for the preset element, for example, detecting a mouseover event of the user's mouse or a touchstart event of the user's gesture, the trigger timer calculates a first delay, for example, triggering a hoverdelay() method to calculate the first delay. The timer continuously calculates the first delay regardless of whether the contact operation for the preset element continues, and displays the first delay when the first delay is greater than the first preset duration (for example, 500 ms). At least one picture.

B2: The trigger timer is used to calculate the second delay when the contact operation is detected; and when the second delay is greater than the second preset duration, at least one picture corresponding to the preset element is displayed. When the terminal device detects the contact operation on the preset element, the timer is not triggered, but after the contact operation with the preset element ends, the trigger timer calculates a second delay. For example, when the user mouse or the user gesture moves into the display area of the preset element, the timer is not triggered. When the user mouse leaves the display area of the preset element, the corresponding mouseover event is detected to end, and the user gesture leaves the preset element. The touchend event was detected when the area was displayed. At this time, the second delay is calculated again, and when the second delay is greater than the second preset duration, the at least one picture is displayed. For example, the terminal device sets the second preset duration by hoverout:t, hoverout: 300, and the second preset duration is 300 ms. When the user's mouse or user gesture has moved out of the preset element, and starts to display after 300 ms. At least one picture corresponding to the preset element.

B3. When detecting that the contact operation is a continuous contact operation, the trigger timer calculates a first duration of the contact operation; and when the first duration of the contact operation is greater than the third preset duration, displaying at least one corresponding to the preset element Picture. After the terminal device detects the contact operation for the preset element, for example, detecting a mouseover event of the user's mouse or a touchstart event of the user's gesture, the trigger timer calculates the first duration, which is different from the manner of B1, the user gesture or the user's mouse. When the display area of the preset element is removed, the timer is cleared, and the timer continuously calculates the first duration when the user gesture or the user's mouse remains in the display area of the preset element. When the first duration is longer than the third preset duration, the at least one picture is displayed. For example, the terminal device sets the third preset duration by hoverduring:t, hoverduring: 1000, which represents that the detected contact operation needs to last for 1000 ms, and the user mouse or user gesture moves into the preset element and remains in the display area of the preset element. At least 1000 ms corresponding to the preset element is displayed within 1000 ms.

When the terminal device displays at least one picture corresponding to the preset element, different display effects are generated based on different setting manners of the at least one picture.

C1, based on the setting mode of A1 in step S101, when the terminal device displays at least one picture corresponding to the preset element, moving the at least one picture to the display position around the preset element for display, wherein the display position is The same layer of the preset elements. As shown in Figure 2(b), located The picture 110, the picture 111 and the picture 112 of the next layer of the preset element 10 start to move to the respective corresponding display position 120, display position 121 and display position 122, respectively, and finally fill the corresponding display position as shown in FIG. 2(c). Show in the middle. At the same time, when the picture 110, the picture 111, and the picture 112 are moved into the corresponding display position 120, the display position 121, and the display position 122, the display layer is changed from z-index: -1 to z-index: 0, in the preset element. The same layer of 10 will no longer be covered by preset elements and other web elements of the same layer. From the user's point of view, the picture 110, the picture 111, and the picture 112 can be seen to be removed from the display area of the preset element 10 and finally moved around the preset element 10 for presentation.

C2, based on the setting mode of A2 in step S101, when the terminal device displays at least one picture corresponding to the preset element, reducing the transparency of the at least one picture, and displaying the at least one picture in the corresponding display position. The picture 210, the picture 211, and the picture 212 are respectively disposed in the corresponding display position 220, the display position 221, and the display position 222, and the transparency is set to 100% and is in a hidden state. As shown in FIG. 3(b), the transparency of the picture 210, the picture 211, and the picture 212 is directly reduced to 0%, so that the picture 210, the picture 211, and the picture 212 are displayed at the corresponding display positions. In another presentation, the transparency of the picture 210, the picture 211, and the picture 212 is gradually reduced, so that the picture 210, the picture 211, and the picture 212 are gradually and clearly displayed in the corresponding display position in a looming manner.

In the two display modes of C1 and C2, when at least one picture corresponding to the preset element is multiple pictures, the display order of the multiple pictures corresponding to the preset element may be further preset. Implemented by JS script program, for example, using the setTimeout() method in the JS script program to control the display order of multiple images, set setTimeout(F(n), time), where n represents the picture number, time represents and starts displaying The time interval of multiple pictures at this moment. If time is set to 0, the picture is displayed immediately at the moment when the at least one picture is displayed, and the time is set to 300, and the at least one picture is displayed at the beginning. The picture is displayed at 300ms after a moment. Displaying multiple images corresponding to preset elements in order according to the preset display order can further attract users to browse the content of each image to achieve better display effect. In an embodiment, each of the plurality of pictures corresponding to the preset element is a picture link, and the web content server counts the multiple pictures to trigger the corresponding webpage every preset period. Frequency, and adjust the frequency of the corresponding webpage according to the multiple pictures from high to low. The order in which the images are displayed will be prioritized for the images that trigger the higher frequency of the page. Or, according to the plurality of pictures, the frequency of the corresponding webpage is triggered to adjust the display position of the multiple images, and the image with the higher frequency of the corresponding webpage is adjusted to the display position of the priority display. Therefore, it can be perceived from the user's perspective that the display order or the display position of the plurality of pictures may be adjusted, but is actually adjusted as the frequency of triggering the corresponding pages changes from high to low.

In one embodiment, as shown in FIG. 4, the picture display method further includes the following steps.

In step S301, a preset element is displayed in the webpage, and at least one picture corresponding to the preset element is in a hidden state, and the preset element is an interactive page element for displaying at least one picture.

In step S302, after detecting the contact operation for the preset element, at least one picture corresponding to the preset element is displayed.

In step S303, when at least one picture corresponding to the preset element is displayed, the trigger timer calculates a second duration of time at which the at least one picture is displayed.

When the terminal device starts to display at least one picture corresponding to the preset element, triggering a timer to calculate a second duration of displaying the at least one picture, that is, displaying the at least one picture corresponding to the preset element in the webpage continued for a period of time.

In step S304, when the second duration is greater than the fourth preset duration, the at least one picture is reset to the hidden state.

For example, if the fourth preset duration is 20 seconds, when the second duration of the at least one picture corresponding to the preset element is more than 20 seconds, the at least one picture is reset to the hidden state in step S301. Only the preset elements can still be browsed in the web page. Maintaining display of at least one picture corresponding to the preset element within the second duration, facilitating the user to click on the at least one picture to enter the web page to which the picture is linked.

The embodiment of the present application establishes a connection between the display of the webpage image and the browsing process and the focus of the user, and constructs an interactive webpage image display manner, so that the display of the webpage image interacts with the webpage browsing process of the user.

The application is further described below by way of an application example.

As shown in FIG. 5(a), three pictures are arranged around a preset element 40 in the webpage, which are a picture 410, a picture 411, and a picture 412, respectively. The placement of these three images can be set at On either side of the preset element 40, in FIGS. 5(a) to 5(e), the display positions of the three pictures are arranged on the right side of the preset element 40 and aligned to be exemplified. The picture 410, the picture 411, and the picture 412 are respectively set at the corresponding display positions, and the transparency is set to 100% so as to be in a hidden state. The broken line in Fig. 5(a) indicates that the picture 410, the picture 411, and the picture 412 are in a hidden state at this time. As shown in FIG. 5(b), when the browser opens the webpage, the user can only see the preset element 40, but does not see the image 410, the picture 411, and the picture 412. The terminal device detects a contact operation for the preset element 40 from a user's mouse operation, for example, the terminal device detects a mouseover event for the preset element. As shown in FIG. 5(c), when the user mouse moves into the display area of the preset element 40, the terminal device detects the mouseover event. At this point, the terminal device includes the following three possibilities:

(1) When the terminal device detects the mouseover event, the trigger timer starts to calculate the first delay, that is, after the mouse moves into the preset element 40 as shown in FIG. 5(c), the mouse continues to calculate no matter where the mouse moves to the webpage. a first delay, when the first delay is greater than the first preset duration, the terminal device starts to display the picture 410, the picture 411, and the picture 412 in a hidden state;

(2) The terminal device detects the mouseover event and the user mouse has left the preset element 40 as shown in FIG. 5(d), and the terminal device detects that the mouseover event ends, triggering the timer to start calculating the second delay, regardless of the mouse. When the page is moved to the webpage, the second delay is continuously calculated, that is, the user mouse moves in from the display area of the preset element 40 first, then moves out, and starts to calculate the second delay when the user mouse moves out. When the second delay is greater than the second preset duration, the terminal device starts to display the picture 410, the picture 411, and the picture 412 in a hidden state;

(3) When the terminal device detects the mouseover event, the trigger timer calculates the first duration of the mouseover event. If the user mouse moves out of the display area of the preset element 40, the timer stops calculating the first duration. When the first duration is longer than the third preset duration, that is, the moving range of the user's mouse is kept in the display area of the preset element 40 as shown in FIG. 5(c), the terminal device starts to display the picture 410 in the hidden state, Picture 411 and picture 412.

The transparency of picture 410, picture 411, and picture 412 begins to gradually decrease, eventually reaching 0%, causing the three pictures to be displayed in the corresponding display positions. At this time, an equal interval delay may be set for the display manner in which the picture 410, the picture 411, and the picture 412 gradually reduce the transparency, for example, the time when the picture 410 starts to decrease the transparency for display, setTimeout(F(1), 0), and the picture 411 starts to decrease. The time at which the transparency is displayed, setTimeout(F(2), 200), the time at which the picture 412 starts to decrease the transparency for display, setTimeout(F(3), 400), that is, the time at which the picture 410, the picture 411, and the picture 412 start to reduce the transparency for display. The interval is 200ms. The final display effect of picture 410, picture 411, and picture 412 is shown in Figure 5(e). The user moves the mouse into the preset element 40, and considers that the user has browsed or paid attention to the preset element 40. At this time, the picture corresponding to the preset element 40 is displayed, thereby establishing a connection between the webpage image display and the user browsing process, and enhancing The interaction between the web page image display and the user browsing process.

In another application example, as shown in FIG. 6(a), three pictures are set on the next layer of the display layer where a preset element 50 in the webpage is located, which are picture 510, picture 511, and picture 512, respectively. These three pictures are all covered by the preset element 50, and the user cannot see the three pictures under the preset element 50. The placement positions of the three pictures are set to the right of the preset element 50 and aligned to be exemplified. As shown in FIG. 6(b), when the browser opens the webpage, the user can only see the preset element 50, but does not see the image 510, the picture 511, and the picture 512. The touch display screen of the terminal device detects a touch operation for the preset element 50 from a gesture operation of the user, for example, the terminal device detects a touchstart event for the preset element 50. As shown in FIG. 6(c), when the user gesture moves into the display area of the preset element 50 on the touch display screen, the terminal device detects the touchstart event. At this point, the terminal device includes the following three possibilities:

(1) When the terminal device detects the touchstart event, the trigger timer starts to calculate the first delay, that is, after the mouse moves into the preset element 50 as shown in FIG. 6(c), the user continues to calculate the gesture regardless of where the gesture is moved. The first delay, when the first delay is greater than the first preset duration, the terminal device starts to display the picture 510, the picture 511 and the picture 512 in a hidden state;

(2) The terminal device detects the touchstart event and the user gesture has left the preset element 50 as shown in FIG. 6(d), and the trigger device starts to calculate the second when the terminal device detects the touchstart event for the preset element 50. The delay, no matter where the user gesture moves to the webpage, continuously calculates the second delay, that is, the user gesture is first moved in from the display area of the preset element 50, and then removed, and the second delay is calculated when the user gesture is removed. When the second delay is greater than the second preset duration, the terminal device starts to display the picture 510, the picture 511, and the picture 512 in a hidden state;

(3) When the terminal device detects the touchstart event for the preset element 50, the trigger timer calculates the first duration of the touchstart event, and the user gesture moves out of the display area of the preset element 50. When the timer stops calculating the first duration. When the first duration is longer than the third preset duration, that is, the moving range of the user gesture remains in the display area of the preset element 50 as shown in FIG. 6(c), the terminal device starts to display the picture 510 in the hidden state, Picture 511 and picture 512.

The picture 510, picture 511, and picture 512 begin to move from the next layer of the preset element 50 to their respective corresponding placement positions until they are moved to the corresponding placement position. The user will see these three images slide out from the right side of the preset element 50 for display. Similarly, the display mode in which the picture 510, the picture 511, and the picture 512 slide out from the right side of the preset element 50 can be set to be equally spaced. For example, as shown in FIG. 6(e), the picture 510, the picture 511, and the picture 512 are sequentially displayed from the right side of the preset element 50 at intervals of 200 ms. The display effect after the picture 510, the picture 511, and the picture 512 are all slid out is as shown in FIG. 6(f). The user gesture moves to the preset element 50, and the user is considered to have browsed or paid attention to the preset element 50. At this time, the picture corresponding to the preset element 50 is displayed, and the connection between the webpage image display and the user browsing process is established, and the relationship is enhanced. The interaction between the web page image display and the user browsing process.

FIG. 7 is a picture display apparatus provided by an embodiment of the present application, including:

The first display module 60 is configured to display a preset element in the webpage, where at least one picture corresponding to the preset element is in a hidden state, and the preset element is an interactive page element for displaying at least one picture;

The second display module 61 is configured to display at least one picture corresponding to the preset element after detecting the contact operation for the preset element.

In an embodiment, the second display module 61 includes:

a first timing sub-module, configured to trigger a timer to calculate a first delay when detecting a contact operation;

The first display sub-module is configured to display at least one picture corresponding to the preset element when the first delay is greater than the first preset duration.

Alternatively, the second display module 61 includes:

a second timing sub-module, configured to trigger a timer to calculate a second delay when the contact operation has ended;

The second display sub-module is configured to display at least one picture corresponding to the preset element when the second delay is greater than the second preset duration.

Alternatively, the second display sub-module 61 includes:

a third timing sub-module, configured to: when detecting that the contact operation is a continuous contact operation, triggering a timer to calculate a first duration of the contact operation;

The third display sub-module is configured to display at least one picture corresponding to the preset element when the first duration of the contact operation is greater than the third preset duration.

In an embodiment, the first display module 60 includes:

The first processing submodule sets at least one picture in a layer below the preset element and is covered by the preset element;

The second display module 61 includes:

The fourth display sub-module is configured to move at least one picture to a display place around the preset element for display, wherein the display position is on the same layer of the preset element.

In an embodiment, the first display module 60 includes:

a second processing sub-module, configured to set at least one picture at a display position around the preset element, and is in a hidden state by setting the transparency;

The second display module 61 includes:

The fifth display sub-module is configured to gradually reduce the transparency of at least one image and display at least one image on the display position.

In an embodiment, the second display module 61 includes:

The sixth display sub-module is configured to display multiple images in sequence according to the preset display order of the multiple images when at least one picture is a plurality of pictures.

The device also includes:

The adjustment module is used for the display order or display position of multiple pictures, and is adjusted as the frequency of triggering the corresponding page changes from high to low.

In one embodiment, the apparatus further comprises:

The timing module 62 is configured to: when the at least one picture corresponding to the preset element is displayed, the trigger timer calculates a second duration of displaying the at least one picture,

The reset module 63 is configured to reset at least one piece when the second duration is greater than the fourth preset duration The picture is hidden.

In an embodiment, the second display module 61 includes:

The first detecting submodule is configured to detect a contact operation between the mouse and the preset element.

Alternatively, the second display module 61 includes:

The second detecting submodule is configured to detect a contact operation of the gesture with the preset element.

In a typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.

The memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory. Memory is an example of a computer readable medium.

Computer readable media includes both permanent and non-persistent, removable and non-removable media. Information storage can be implemented by any method or technology. The information can be computer readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory. (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, compact disk read only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transportable media can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include non-transitory computer readable media, such as modulated data signals and carrier waves.

Certain terms are used throughout the description and claims to refer to particular components. Those skilled in the art will appreciate that hardware manufacturers may refer to the same component by different nouns. The present specification and the claims do not use the difference in the name as the means for distinguishing the components, but the difference in function of the components as the criterion for distinguishing. The word "comprising" as used throughout the specification and claims is an open term and should be interpreted as "including but not limited to". "Substantially" means that within the range of acceptable errors, those skilled in the art will be able to solve the technical problems within a certain error range, substantially achieving the technical effects. In addition, the term "coupled" is used herein to include any direct and indirect electrical coupling means. Therefore, if a first device is coupled to a second device, the first The device can be directly electrically coupled to the second device or electrically coupled to the second device indirectly through other devices or coupling means. The description of the present invention is intended to be illustrative of the preferred embodiments of the invention. The scope of the invention is defined by the appended claims.

It should also be noted that the terms "including", "comprising" or "comprising" or any other variations thereof are intended to encompass a non-exclusive inclusion, such that the item or system comprising a plurality of elements includes not only those elements but also Other elements, or elements that are inherent to such goods or systems. An element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the item or system including the element, without further limitation.

The above description illustrates and describes several preferred embodiments of the present invention, but as described above, it should be understood that the invention is not limited to the forms disclosed herein, and should not be construed as Other combinations, modifications, and environments are possible and can be modified by the above teachings or related art or knowledge within the scope of the inventive concept described herein. All changes and modifications made by those skilled in the art are intended to be within the scope of the appended claims.

Claims

A picture display method, comprising:

Displaying a preset element in the webpage, at least one picture corresponding to the preset element is in a hidden state, and the preset element is an interactive page element for displaying the at least one picture;

After detecting a contact operation for the preset element, at least one picture corresponding to the preset element is displayed.
The method according to claim 1, wherein after detecting the contact operation for the preset element, displaying at least one picture corresponding to the preset element comprises:

The trigger timer is used to calculate the first delay when the contact operation is detected;

When the first delay is greater than the first preset duration, displaying at least one picture corresponding to the preset element; or

Triggering a timer to calculate a second delay when detecting that the contact operation has ended;

When the second delay is greater than the second preset duration, displaying at least one picture corresponding to the preset element; or

When detecting that the contact operation is a continuous contact operation, the trigger timer calculates a first duration of the contact operation;

When the first duration of the contact operation is greater than the third preset duration, at least one picture corresponding to the preset element is displayed.
The method according to claim 1, wherein the displaying a preset element in the webpage, and the at least one image corresponding to the preset element is in a hidden state comprises:

Setting the at least one picture to a next layer of the preset element and being covered by the preset element;

After detecting the contact operation for the preset element, displaying at least one picture corresponding to the preset element includes:

Moving the at least one picture to a placement around the preset element for display, wherein the placement is at the same level of the preset element.
The method according to claim 1, wherein the displaying a preset element in the webpage, and the at least one image corresponding to the preset element is in a hidden state comprises:

Setting the at least one picture at a display position around the preset element, and being in a hidden state by setting a transparency;

After detecting the contact operation for the preset element, displaying at least one picture corresponding to the preset element includes:

The transparency of the at least one picture is gradually reduced, and the at least one picture is displayed at the display position.
The method according to claim 1, wherein after detecting the contact operation for the preset element, displaying at least one picture corresponding to the preset element comprises:

When the at least one picture is a plurality of pictures, the plurality of pictures are sequentially displayed according to a preset display order of the plurality of pictures.
The method of claim 5, wherein the method further comprises:

The order in which the plurality of pictures are displayed or the position of the display is adjusted as the frequency of triggering the corresponding page changes from high to low.
The method of claim 1 wherein the method further comprises:

When displaying at least one picture corresponding to the preset element, the trigger timer calculates a second duration of displaying the at least one picture,

And resetting the at least one picture to the hidden state when the second duration is greater than a fourth preset duration.
The method of claim 1, wherein the detecting a contact operation for the preset element comprises:

Detecting a contact operation of the mouse with the preset element; or

A contact operation of the gesture with the preset element is detected.
A picture display device, comprising:

a first display module, configured to display a preset element in the webpage, where at least one picture corresponding to the preset element is in a hidden state, where the preset element is used to display the intersection of the at least one picture Inter-page element

The second display module is configured to display at least one picture corresponding to the preset element after detecting a contact operation for the preset element.
The device of claim 9, wherein the second display module comprises:

a first timing submodule, configured to trigger a timer to calculate a first delay when the contact operation is detected;

a first display sub-module, configured to display at least one picture corresponding to the preset element when the first delay is greater than the first preset duration; or

a second timing sub-module, configured to trigger a timer to calculate a second delay when the contact operation has ended;

a second display sub-module, configured to display at least one picture corresponding to the preset element when the second delay is greater than the second preset duration; or

a third timing submodule, configured to: when detecting that the contact operation is a continuous contact operation, trigger a timer to calculate a first duration of the contact operation;

The third display sub-module is configured to display at least one picture corresponding to the preset element when the first duration of the contact operation is greater than the third preset duration.
The device of claim 9, wherein the first display module comprises:

a first processing submodule, the at least one picture is disposed on a next layer of the preset element, and is covered by the preset element;

The second display module includes:

And a fourth display sub-module, configured to move the at least one picture to a display place around the preset element for display, wherein the display position is on a same layer of the preset element.
The device of claim 9, wherein the first display module comprises:

a second processing submodule, configured to set the at least one picture at a display position around the preset element, and in a hidden state by setting a transparency;

The second display module includes:

a fifth display sub-module for gradually reducing the transparency of the at least one picture, the One less image is displayed in the placement.
The device of claim 9, wherein the second display module comprises:

a sixth display sub-module, configured to display the plurality of pictures in sequence according to a preset display order of the plurality of pictures when the at least one picture is a plurality of pictures.
The device of claim 9 wherein said device further comprises:

The adjustment module is used for displaying the order or the display position of the plurality of pictures, and is adjusted according to a change in the order of triggering the frequency of the corresponding page from high to low.
The device of claim 9 wherein said device further comprises:

a timing module, configured to: when displaying at least one picture corresponding to the preset element, triggering a timer to calculate a second duration of displaying the at least one picture,

The reset module is configured to reset the at least one picture to the hidden state when the second duration is greater than the fourth preset duration.
The device of claim 9, wherein the second display module comprises:

a first detecting submodule, configured to detect a contact operation of the mouse with the preset element; or

The second detecting submodule is configured to detect a contact operation of the gesture with the preset element.