WO2016107325A1

WO2016107325A1 - Page resource loading method and device based on mobile terminal

Info

Publication number: WO2016107325A1
Application number: PCT/CN2015/095013
Authority: WO
Inventors: 游少华
Original assignee: 北京奇虎科技有限公司; 奇智软件（北京）有限公司
Priority date: 2014-12-29
Filing date: 2015-11-19
Publication date: 2016-07-07
Also published as: CN104536791A

Abstract

Disclosed are a page resource loading method and device based on a mobile terminal, which relate to the technical field of resource loading. The method comprises: when a current page of an application program is displayed in an interface, acquiring a touch control operation of a user on the interface; determining a page switching direction of the application program according to the touch control operation; and determining a page to be loaded in the application program and triggering resource loading of the page to be loaded according to the current page and the page switching direction. By means of the present invention, as the touch control operation of the user on the interface is acquired, the page switching direction of the application program is determined according to the touch control operation, the page to be loaded in the application program is determined according to the current page and the page switching direction, and then the resource loading of the page to be loaded is triggered, a loading time of a scene application is effectively shortened, the user experience is improved, it is unnecessary to load some pages which may not be browsed, and the user traffic is saved.

Description

Method and device for loading page resource based on mobile terminal

Technical field

The present invention relates to the field of resource loading technologies, and in particular, to a method and device for loading a page resource based on a mobile terminal.

Background technique

The scenario application is an application composed of a plurality of pages, and the page is developed by using a hypertext markup language HTML technology, and is suitable for use on a mobile terminal, and usually performs a page switch by a touch operation performed by the user on the mobile terminal, thereby The interaction is completed and is now often used for product promotion.

Since most of the pages of the scene application are picture resources, generally each picture uses a jpg format of about 100 kb, and if there are 10 pictures, it is equivalent to 1 M, and other pictures and other resources are generally 2 to 5 M.

In the prior art, when the user browses the scenario application, the mobile terminal can completely perform page switching after the page in the entire scenario application is loaded, but if the mobile terminal is in a network with a slow network speed such as a 2G network or a 3G network. The page load time of the mobile terminal is too long, which seriously affects the user experience. In addition, the user does not necessarily browse all the pages in the scenario application, and still needs to load all the pages in the scenario application, and also on the user. Traffic is a waste.

Summary of the invention

In view of the above problems, the present invention has been made in order to provide a mobile terminal-based page resource loading method and a corresponding mobile terminal-based page resource loading device that overcome the above problems or at least partially solve the above problems.

According to an aspect of the present invention, a method for loading a page resource based on a mobile terminal is provided, and the method includes:

When the current page of the application is displayed in the interface, the touch operation of the user on the interface is obtained, and the application is composed of several pages;

Determining a page switching direction of the application according to the touch operation;

Determining a page to be loaded in the application according to the current page and page switching direction, Triggering resource loading of the page to be loaded.

According to another aspect of the present invention, a mobile terminal-based page resource loading apparatus is provided, and the apparatus includes:

An operation acquirer, configured to acquire a touch operation of the user on the interface when the current page of the application is displayed in the interface, where the application program is composed of several pages;

a direction determining unit, configured to determine a page switching direction of the application according to the touch operation;

The loading trigger is adapted to determine a page to be loaded in the application according to the current page and page switching direction, and trigger resource loading of the page to be loaded.

According to still another aspect of the present invention, a computer program is provided, comprising computer readable code that, when executed on a mobile terminal, causes the mobile terminal to perform the mobile terminal based Page resource loading method.

According to still another aspect of the present invention, a computer readable medium is proposed, wherein the computer program described above is stored.

The method of determining a page switching direction of the application according to the touch operation, determining a page switching direction of the application according to the current page and a page switching direction, and determining a page to be loaded in the application, and then The resource loading of the page to be loaded is triggered, which effectively shortens the loading time of the scenario application, improves the user experience, and does not need to load some pages that may not be browsed, thereby saving user traffic.

The above description is only an overview of the technical solutions of the present invention, and the above-described and other objects, features and advantages of the present invention can be more clearly understood. Specific embodiments of the invention are set forth below.

DRAWINGS

Various other advantages and benefits will become apparent to those skilled in the art from a The drawings are only for the purpose of illustrating the preferred embodiments and are not to be construed as limiting. Throughout the drawings, the same reference numerals are used to refer to the same parts. In the drawing:

1 is a flow chart of steps of a method for loading a page resource based on a mobile terminal according to an embodiment of the present invention;

2 is a flow chart of steps of a method for loading a page resource based on a mobile terminal according to an embodiment of the present invention;

3 is a diagram showing an example of a page in a scenario application according to an embodiment of the present invention;

4 is a diagram showing an example of a scenario application applied for the first time browsing according to an embodiment of the present invention;

FIG. 5 is a diagram showing an example of switching a scene application from page 1 to page 2 according to an embodiment of the present invention; FIG.

6 is a diagram showing an example of switching a scene application from page 2 to page 3 in accordance with an embodiment of the present invention;

7 is a diagram showing an example of switching a scene application from page 2 to page 1 according to an embodiment of the present invention;

8 is a diagram showing an example of switching a scene application from page 1 to page 1 in accordance with an embodiment of the present invention;

FIG. 9 is a flowchart of steps of a method for loading a page resource based on a mobile terminal according to an embodiment of the present invention; FIG.

FIG. 10 is a structural block diagram of a page resource loading apparatus based on a mobile terminal according to an embodiment of the present invention; FIG.

FIG. 11 is a structural block diagram of a page resource loading apparatus based on a mobile terminal according to an embodiment of the present invention; FIG.

Figure 12 is a schematic block diagram showing a mobile terminal for performing the method according to the present invention;

Fig. 13 schematically shows a storage unit for holding or carrying program code implementing the method according to the invention.

Specific embodiment

The specific embodiments of the present invention are further described in detail below with reference to the drawings and embodiments. The following examples are intended to illustrate the invention but are not intended to limit the scope of the invention.

FIG. 1 is a flowchart of steps of a method for loading a page resource based on a mobile terminal according to an embodiment of the present invention; referring to FIG. 1, the method includes:

S101: Acquire a touch operation of the user on the interface when the current page of the application is displayed in the interface, where the application is composed of several pages;

It can be understood that the interface is the display interface of the mobile terminal, and the current page is the page currently displayed in the display interface of the mobile terminal, and the application is the scenario application.

S102: Determine a page switching direction of the application according to the touch operation.

It should be noted that the correspondence between the touch operation and the page switching mode may be preset in the mobile terminal, and then the page switching direction of the application is determined according to the touch operation;

For example, two buttons are preset in the interface, and when the touch operation is clicking the first button, the page switching direction is determined to be positive (the Nth page is the current page, that is, the Nth page applied from the scene) Switching to the direction of page N+1), when the touch operation is to click the second button, it can be determined that the page fantasy direction is reversed (ie, switching from the Nth page of the scene application to the direction of the N-1th page) ;

For another example, when the touch operation is sliding upward, it may be determined that the page switching direction is forward, and when the touch operation is sliding downward, it may be determined that the page switching direction is reverse;

Certainly, the step S102 may also use other manners to determine the page switching direction of the application, which is not limited in this embodiment.

S103: Determine a to-be-loaded page in the application according to the current page and page switching direction, and trigger resource loading of the to-be-loaded page.

In this embodiment, the user performs a touch operation on the interface, determines a page switching direction of the application according to the touch operation, and determines a page to be loaded in the application according to the current page and the page switching direction. The resource loading of the page to be loaded is triggered, which effectively shortens the loading time of the scenario application, improves the user experience, and does not need to load some pages that may not be browsed, thereby saving user traffic.

2 is a flow chart of steps of a method for loading a page resource based on a mobile terminal according to an embodiment of the present invention; referring to FIG. 2, the method includes:

S201: Acquire a touch operation of the user on the interface when the current page of the application is displayed in the interface, where the application is composed of several pages;

S202: Determine a page switching direction of the application according to the touch operation.

It is to be understood that the steps S201 to S202 are the same as the steps S101 to S102 in the embodiment shown in FIG. 1 and will not be further described herein.

S203: Determine a to-be-displayed page in the application according to the current page and a page switching direction, and switch a current page displayed in the interface to the to-be-displayed page, where the application is from the current page. Starting the first unloaded page along the page switching direction as described The page to be loaded triggers resource loading of the page to be loaded.

It should be noted that, in order to implement the prediction of the browsing page required by the user, and to ensure the continuity of the browsing of the user, in the embodiment, the first application in the application is switched from the current page along the page switching direction. The page is not loaded as the page to be loaded.

It can be understood that in order to avoid waste of traffic and ensure normal use of the user, all resources of the initial page need to be loaded when browsing the scenario application for the first time.

The initial page usually needs to include the first page of the scenario application, and at least one page adjacent to the scenario application is required. Since the user's usual browsing habits are viewed from the front to the back, the scene is set in this embodiment. The first and second pages of the application are set as the initial page. Of course, other pages can also be set as the initial page. For example, the third page is also set as the initial page, or the last page is also set as the initial page. The embodiment does not limit this.

In this embodiment, the on-demand loading of the user is implemented, and the next page to be browsed is predicted according to the current page and the page switching direction, and the resource of the page is loaded; the user does not need to load some page resources that may not be browsed in the future, and each time only Loading a page resource reduces the http request, effectively shortening the load time of the scenario application and improving the user experience.

The following describes the determination of the page to be loaded by taking the initial page as the first and second pages as an example, but does not limit the scope of protection of the present invention.

Since the scene application is composed of several pages, referring to FIG. 3, the scene application can be regarded as a list, each of which acts as a page, and each page has many resources.

When the user browses the scene application for the first time, referring to Figure 4, all the resources of the initial page (ie, pages 1 and 2) are automatically loaded. If all the resources of the first and second pages are not loaded, the page cannot be paged. For the first page;

When the user needs to switch from the first page to the second page, the touch operation of the user on the interface is obtained, and the page switching direction is determined to be positive according to the touch operation. Referring to FIG. 5, the to-be-loaded is determined. The page is page 3, triggering the resource loading of page 3, and the current page is switched from page 1 to page 2;

After the resource loading on page 3 is completed, when the user needs to switch from the second page to the third page, the user performs a touch operation on the interface, and determines that the page switching direction is positive according to the touch operation. Referring to FIG. 6, it is determined that the page to be loaded is the fourth page, triggering the resource loading of the fourth page, and the current page is switched from the second page to the third page;

And so on, if the current page is on the third page, when the user needs to switch from the third page to the second page, the user touches the touch operation on the interface, and determines the page switching according to the touch operation. The direction is positive, thereby determining that the page to be loaded is the last page, triggering the resource loading of the last page, and the current page is switched from the third page to the second page of the last;

When the current page is the second page, when the user needs to switch from the second page to the first page, the touch operation of the user on the interface is obtained, and the page switching direction is determined to be reverse according to the touch operation. 7, thereby determining that the page to be loaded is the last page, triggering the resource loading of the last page, and the current page is switched from the second page to the first page;

When the current page is the first page, when the user needs to switch from the first page to the last page, the touch operation of the user on the interface is obtained, and the page switching direction is determined to be reverse according to the touch operation. , thereby determining that the page to be loaded is the second page of the last, triggering the resource loading of the second page of the last, and the current page is switched from the first page to the last page;

And so on, if the current page is the last page, when the user needs to switch from the last page to the second page, the user performs a touch operation on the interface, and determines that the page switching direction is reversed according to the touch operation. To determine, the page to be loaded is the third page of the last, triggering the resource loading of the third page of the last, and the current page is switched from the last page to the second page.

FIG. 9 is a flowchart of steps of a method for loading a page resource based on a mobile terminal according to an embodiment of the present invention; referring to FIG. 9, the method includes:

S901: Acquire a touch operation of the user on the interface when the current page of the application is displayed in the interface, where the application is composed of several pages;

S902: Determine a page switching direction of the application according to the touch operation.

Steps S901 to S902 are the same as steps S101 to S102 of the embodiment shown in FIG. 1, and details are not described herein again.

S903: Determine a to-be-loaded page in the application according to the current page and the page switching direction, trigger a picture loading of the to-be-loaded page, and trigger a background image loading of the to-be-loaded page.

Since the file of the page and the file of the background image are large, the resource loading speed of the page plays a decisive role. Therefore, in this embodiment, the resources of the page are a picture and a background image.

In order to load all the pictures and/or background images in all the pages in one page when loading the application, a plurality of methods may be used. In this embodiment, when writing the HTML structure of the page, Place the background image and/or the URL of the image in the corresponding data-src attribute, so that when a page in the application is loaded (such as when the browser loads the page), all the images will not be automatically downloaded at one time. / or all background images, but according to the user's current browsing page, the pre-trigger loading of the next page or the corresponding image and/or background image of the previous page.

When the image of the page to be loaded is triggered to be loaded, and the background image of the page to be loaded is triggered to be loaded, all the pictures and background images in the page to be loaded are selected by the return function $('[data-src]') in jquery ( The background image can be identified by bg=1 in the data-src, and the object of the image and the background image is created by new Image(), and the src attribute in the img tag of the page to be loaded is written and placed in the data-src. The URL of the picture in the attribute, the URL of the background image placed in the data-src attribute is written to the background attribute in the body tag of the page to be loaded, and the corresponding picture is downloaded according to the URL of the picture, according to the background Downloading a corresponding background image of the URL of the image, thereby implementing loading of the image of the page to be loaded and the background image;

Of course, the method may be implemented in other manners, for example, the URL of the background image and the image are placed in other attributes, or the URL of the background image and the image is directly written into the js variable array, which is not limited in this embodiment. .

For the method embodiments, for the sake of simple description, they are all expressed as a series of action combinations, but those skilled in the art should understand that the embodiments of the present invention are not limited by the described action sequence, because the embodiment according to the present invention Some steps can be performed in other orders or at the same time. In the following, those skilled in the art should also understand that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

FIG. 10 is a structural block diagram of a device for loading a page resource based on a mobile terminal according to an embodiment of the present invention; and referring to FIG. 10, the device includes:

The operation acquirer 1001 is configured to acquire a touch operation of the user on the interface when the current page of the application is displayed in the interface, where the application is composed of several pages;

The direction determiner 1002 is adapted to determine a page switching direction of the application according to the touch operation;

The loading trigger 1003 is adapted to determine a page to be loaded in the application according to the current page and page switching direction, and trigger resource loading of the page to be loaded.

In an optional embodiment of the present invention, the loading trigger is further adapted to use, as the first unloaded page in the application, from the current page along the page switching direction. The page to be loaded.

In an optional embodiment of the present invention, the loading trigger is further adapted to trigger a picture loading of the page to be loaded, and trigger a background image loading of the page to be loaded.

In an optional embodiment of the present invention, the loading trigger is further adapted to write a uniform resource locator URL of the image to the src attribute in the img tag of the page to be loaded, according to the URL of the picture. Downloading a corresponding picture, thereby implementing image loading of the page to be loaded.

In an optional embodiment of the present invention, the loading trigger is further adapted to write a uniform resource locator URL of the background image to a background attribute in the body tag of the page to be loaded, according to the background image. The URL downloads the corresponding background image, thereby implementing background image loading of the page to be loaded.

FIG. 11 is a structural block diagram of a device for loading a page resource based on a mobile terminal according to an embodiment of the present invention; and referring to FIG. 11, the device includes:

The operation acquirer 1101 is configured to acquire a touch operation of the user on the interface when the current page of the application is displayed in the interface, where the application is composed of several pages;

The direction determiner 1102 is configured to determine a page switching direction of the application according to the touch operation;

The loading trigger 1103 is adapted to determine a page to be loaded in the application according to the current page and page switching direction, and trigger resource loading of the page to be loaded.

The page switcher 1104 is configured to determine, according to the current page and the page switching direction, a page to be displayed in the application, and switch the current page displayed in the interface to the page to be displayed.

For the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiment.

It should be noted that in the various components of the apparatus of the present invention, the components therein are logically divided according to the functions to be implemented, but the present invention is not limited thereto, and the respective components may be re-divided as needed. Alternatively, for example, some components may be combined into a single component, or some components may be further broken down into more subcomponents.

The various component embodiments of the present invention may be implemented in hardware, or in a software module running on one or more processors, or in a combination thereof. Those skilled in the art will appreciate that a microprocessor or digital signal processor (DSP) can be used in practice to implement Some or all of the functions of some or all of the components of the mobile terminal based page resource loading device of the embodiments of the present invention. The invention can also be implemented as a device or device program (e.g., a computer program and a computer program product) for performing some or all of the methods described herein. Such a program implementing the invention may be stored on a computer readable medium or may be in the form of one or more signals. Such signals may be downloaded from an Internet website, provided on a carrier signal, or provided in any other form.

For example, Figure 12 schematically illustrates a block diagram of a mobile terminal for performing the method in accordance with the present invention. The mobile terminal conventionally includes a processor 1210 and a computer program product or computer readable medium in the form of a memory 1220. The memory 1220 may be an electronic memory such as a flash memory, an EEPROM (Electrically Erasable Programmable Read Only Memory), an EPROM, a hard disk, or a ROM. Memory 1220 has a memory space 1230 for program code 1231 for performing any of the method steps described above. For example, storage space 1230 for program code may include various program codes 1231 for implementing various steps in the above methods, respectively. The program code can be read from or written to one or more computer program products. These computer program products include program code carriers such as hard disks, compact disks (CDs), memory cards or floppy disks. Such a computer program product is typically a portable or fixed storage unit as described with reference to FIG. The storage unit may have a storage section, a storage space, and the like arranged similarly to the storage 1220 in the mobile terminal of FIG. The program code can be compressed, for example, in an appropriate form. Typically, the storage unit comprises computer readable code 1231' for performing the steps of the method according to the invention, ie code readable by a processor such as 1210, which when run by the mobile terminal causes the movement The terminal performs the various steps in the method described above.

"an embodiment," or "an embodiment," or "an embodiment," In addition, it is noted that the phrase "in one embodiment" is not necessarily referring to the same embodiment.

In the description provided herein, numerous specific details are set forth. However, it is understood that the embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures, and techniques are not shown in detail so as not to obscure the understanding of the description.

It should be noted that the above embodiments are illustrative of the invention and are not intended to limit the invention. Alternative embodiments can be devised by those skilled in the art without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as a limitation. The word "comprising" does not exclude the presence of the elements or steps that are not recited in the claims. The word "a" or "an" The invention can be implemented by means of hardware comprising several distinct elements and by means of a suitably programmed computer. In the unit claims enumerating several means, several of these means can be embodied by the same hardware item. The use of the words first, second, and third does not indicate any order. These words can be interpreted as names.

In addition, it should be noted that the language used in the specification has been selected for the purpose of readability and teaching, and is not intended to be construed or limited. Therefore, many modifications and changes will be apparent to those skilled in the art without departing from the scope of the invention. The disclosure of the present invention is intended to be illustrative, and not restrictive, and the scope of the invention is defined by the appended claims.

The above embodiments are merely illustrative of the present invention and are not intended to be limiting of the invention, and various modifications and changes can be made without departing from the spirit and scope of the invention. Equivalent technical solutions are also within the scope of the invention, and the scope of the invention is defined by the claims.

Claims

A method for loading a page resource based on a mobile terminal, the method comprising:

When the current page of the application is displayed in the interface, the touch operation of the user on the interface is obtained, and the application is composed of several pages;

Determining a page switching direction of the application according to the touch operation;

Determining a page to be loaded in the application according to the current page and a page switching direction, and triggering resource loading of the page to be loaded.
The method of claim 1, wherein the determining the page to be loaded in the application according to the current page and the page switching direction further comprises:

The first unloaded page in the application from the current page along the page switching direction is used as the to-be-loaded page.
The method of claim 1, wherein the triggering the resource loading of the page to be loaded further comprises:

Triggering a picture loading of the page to be loaded, and triggering background image loading of the page to be loaded.
The method of claim 3, wherein the triggering the loading of the image of the page to be loaded further comprises:

Writing a uniform resource locator URL of the image to the src attribute of the img tag of the page to be loaded, and downloading a corresponding picture according to the URL of the picture, thereby implementing image loading of the page to be loaded.
The method of claim 3, wherein the triggering the background image loading of the page to be loaded further comprises:

Writing a uniform resource locator URL of the background image to the background attribute in the body tag of the page to be loaded, and downloading a corresponding background image according to the URL of the background image, thereby implementing background image loading of the page to be loaded.
The method according to any one of claims 1 to 5, wherein after determining the page switching direction of the application according to the touch operation, the method further includes:

Determining, according to the current page and the page switching direction, the page to be displayed in the application, and switching the current page displayed in the interface to the to-be-displayed page.
A page resource loading device based on a mobile terminal, characterized in that the device package include:

An operation acquirer, configured to acquire a touch operation of the user on the interface when the current page of the application is displayed in the interface, where the application program is composed of several pages;

a direction determining unit, configured to determine a page switching direction of the application according to the touch operation;

The loading trigger is adapted to determine a page to be loaded in the application according to the current page and page switching direction, and trigger resource loading of the page to be loaded.
The apparatus according to claim 7, wherein said loading trigger is further adapted to use said first unloaded page in said application from said current page in said page switching direction as said The page to be loaded.
The device of claim 7, wherein the loading trigger is further adapted to trigger a picture loading of the page to be loaded and trigger a background image loading of the page to be loaded.
The device according to claim 9, wherein the loading trigger is further adapted to write a uniform resource locator URL of the image to the src attribute in the img tag of the page to be loaded, according to the picture The URL downloads a corresponding picture, thereby implementing image loading of the page to be loaded.
The device according to claim 9, wherein the loading trigger is further adapted to write a uniform resource locator URL of the background image to a background attribute in a body tag of the page to be loaded, according to the background The URL of the image downloads the corresponding background image, thereby implementing background image loading of the page to be loaded.
The device according to any one of claims 7 to 11, wherein the device further comprises a page switch, configured to determine a page to be displayed in the application according to the current page and a page switching direction. And switching the current page displayed in the interface to the page to be displayed.
A computer program comprising computer readable code, when the computer readable code is run on a mobile terminal, causing the mobile terminal to perform a mobile terminal based page according to any one of claims 1-6 Resource loading method.
A computer readable medium storing the computer program of claim 13.