Note: Descriptions are shown in the official language in which they were submitted.
CA 03176866 2022-09-23
WEBPAGE LOADING METHOD, APPARATUS, AND SMART DEVICE
BACKGROUND OF THE INVENTION
Technical Field
[0001] The present invention relates to the technical field of mobile
applications, and more
particularly to a webpage loading method as well as an apparatus and a smart
device thereof.
Description of Related Art
[0002] Hybrid mobile applications (or hybrid apps) are applications between
web-apps and
native-apps. A hybrid app is developed using both program languages and
webpage
languages. Program languages (native) form a base of client applications. For
development
of an app, the languages used have to be selected according to the operating
system running
in the terminal to which the app is intended to deploy. For example, Java
should be selected
for the Android operating system and e Objective-C should be selected for the
iOS operating
system. A client application developed and compiled using program languages
has to be
installed to a terminal for operation. Differently, server applications
deployed and compiled
using webpage languages (Html) have to be installed at a server end or to be
packaged in a
client app, independent of the operating system(s) carried by the connected
terminal(s), which
means that they are cross-platform. In use, a client app can load webpage
resources developed
using a webpage language through web controls to display webpages. It is thus
clear that
hybrid mobile applications have the best of both worlds ¨ the excellent user
experience as
provided by native apps and the possibility of cross-platform development as
seen in web
apps.
[0003] In a hybrid mobile app, its client app displays webpage pages at two
levels, namely the
1
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
page structure and the dynamic data. Generally, to display a webpage, a client
app loads a
webpage address corresponding to the page structure through web controls, and
afterward
acquire the dynamic data by initiating a data request, so that it can fully
display the webpage
according to the returned dynamic data. When a user operates to switch pages,
the webpage
address corresponding to the next page is loaded by means of existing web
controls or newly
constructed web controls, after which the dynamic data can be required and
rendered and the
whole webpage is displayed.
[0004] However, it is found in practical use that hybrid mobile apps can have
problems about
page loading and displaying. To be specific, since it takes time for web
controls to load
webpage addresses and render page resources, the displayed page can at this
time be totally
blank, and this is particular the case during the transition between two
successively displayed
pages. Hence, there is a gap of user experience between apps developed in the
hybrid mode
and those developed using native languages in terms of webpage display.
SUMMARY OF THE INVENTION
[0005] The objective of the present invention is to provide a webpage loading
method as well
as its apparatus and smart device, which enable hybrid mobile apps to provide
user experience
closer to natively developed apps in terms of webpage display.
[0006] In order to achieve the foregoing objective, in one aspect, the present
invention provides
a webpage loading method, which comprises the following steps:
[0007] Si, pre-downloading structure codes of plural pages to be displayed,
and writing the
structure codes into a single HTML file in the unit of pages;
[0008] S2, associating webpage address of each page structure, while marking
the page
structures with distinctive markers, respectively;
[0009] S3, calling a form attribute control to arrange the page structures
into a horizontal
arrangement or a vertical arrangement according to a sequence of the markers;
[0010] S4, automatically accessing the said associated webpage addresses by
using a web
2
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
control, thereby loading dynamic data of a first page, so that the first page
is displayed and
the other page structures are hidden;
[0011] S5, detecting page switching instructions from a user so as to acquire
a marker of a target
page structure, and, based on the marker, placing the target page structure to
a site in an
immediate neighbor to the first page;
[0012] S6, when switching conditions are satisfied, by simulating a native
switching animation,
fading in and displaying the target page structure, while fading out and
hiding the first page;
and
[0013] S7, when the target page structure has been fully faded in, accessing
associated webpage
addresses through the web control to request for rendering of the dynamic data
successively
and displaying a full page view.
[0014] Preferably, the method further comprises the following step:
[0015] S8, after the view of the target page has been fully displayed,
defining the target page
as the first page, and returning to the step S5.
[0016] Specifically, the page switching instructions include a switching-to-
next-page
instruction and a returning-to-previous-page instruction.
[0017] Preferably, the method of detecting page switching instructions from a
user so as to
acquire a marker of a target page structure, and, based on the marker, placing
the target page
structure to a site in an immediate neighbor to the first page comprises:
[0018] when a said switching-to-next-page instruction/returning-to-previous-
page instruction
is detected, automatically locking the marker of the target page structure
while, based on the
marker structure, extracting associated pages and storing them in a site next
to an adjacent
site with respect to the first page, so as to update and adjust the
arrangement of the page
structures; in which
[0019] a site next to the adjacent site with respect to the first page refers
to a site horizontally
adjacent to the first page or a site immediately below the first page.
3
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
[0020] Preferably, the method of pre-downloading structure codes of pages to
be displayed
comprises:
[0021] based on a current access, downloading the structure codes of all pages
to be displayed
at a time.
[0022] As compared to the prior art, the webpage loading method of the present
invention
provides the following beneficial effects:
[0023] In the webpage loading method of the present invention, structure codes
of pages to be
displayed are pre-downloaded. Then the downloaded structure codes are all
stored in the
same HTML file in the unit of pages. Meanwhile, webpage addresses and the
corresponding
webpage structures are associated and the page structures are distinctively
marked, so that
the form attribute control can arrange the plural page structures in order
according to the
distinctive markers. To ensure preferred user experience, a user when
activating the mobile
app has to such configure the first page that the page will be automatically
loaded and
rendered. Afterward, page switching is implemented when a page switching
instruction is
detected. Specifically, the target page structure is placed at the site in the
immediate neighbor
to the first page, so that the target page structure can be faded in and
displayed by simulating
a native switching animation when the switching conditions are satisfied and
the first page
starts to be faded out and hidden until the target page structure has been
fully faded in. Then
the web controls are called to access associated webpage address to request
for rendering of
the dynamic data successively and displaying a full page view.
[0024] It is thus clear that, as compared to the prior-art technical solution
in which for every
page an HTML file has to be correspondingly generated, the present invention
significantly
reduces the frequency of calling web controls to load webpages, and, when
entering the
functional modules, all well arranged page structures of a webpage to be
displayed can be
loaded at a time, thereby effectively shortening the waiting time during page
transition, and
eventually enabling a hybrid mobile app to display webpages with user
experience closer to
that obtained by natively developed apps.
[0025] In another aspect, the present invention provides a webpage loading
apparatus, which is
4
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
applied to the webpage loading method of the foregoing technical solution. The
apparatus
comprises:
[0026] a loading unit, for pre-downloading structure codes of plural pages to
be displayed, and
writing the structure codes into a single HTML file in the unit of pages;
[0027] a page marker unit, for associating webpage address of each page
structure, while
marking the page structures with distinctive markers, respectively;
[0028] a controlling unit, for calling a form attribute control to arrange the
page structures into
a horizontal arrangement or a vertical arrangement according to a sequence of
the markers;
[0029] a first page displaying unit, for automatically accessing the said
associated webpage
addresses by using a web control, thereby loading dynamic data of a first
page, so that the
first page is displayed and the other page structures are hidden;
[0030] a switching processing unit, for detecting page switching instructions
from a user so as
to acquire a marker of a target page structure, and, based on the marker,
placing the target
page structure to a site in an immediate neighbor to the first page;
[0031] an animation unit, for when switching conditions are satisfied, by
simulating a native
switching animation, fading in and displaying the target page structure, while
fading out and
hiding the first page; and
[0032] a switching unit, for when the target page structure has been fully
faded in, accessing
associated webpage addresses through the web control to request for rendering
of the
dynamic data successively and displaying a full page view.
[0033] Preferably, it further comprises:
[0034] a circulating unit, after the view of the target page has been fully
displayed, defining the
target page as the first page, and responding to the switching processing unit
again.
[0035] Preferably, the switching processing unit is specifically for when a
said switching-to-
next-page instruction/returning-to-previous-page instruction is detected,
automatically
locking the marker of the target page structure while, based on the marker
structure,
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
extracting associated pages and storing them in a site next to an adjacent
site with respect to
the first page, so as to update and adjust the arrangement of the page
structures; in which
[0036] a site next to the adjacent site with respect to the first page refers
to a site horizontally
adjacent to the first page or a site immediately below the first page.
[0037] Preferably, the switching unit is specifically for based on current
access downloading
the structure codes of all pages to be displayed at a time, and writing the
codes into a single
HTML file in the unit of pages.
[0038] As compared to the prior art, the disclosed webpage loading apparatus
provides
beneficial effects that are similar to those provided by the webpage loading
method as
enumerated above, and thus no repetitions are made herein.
[0039] In a third aspect, the present invention provides a smart device,
comprising the webpage
loading apparatus of the foregoing technicalsolution.
[0040] As compared to the prior art, the disclosed smart device provides
beneficial effects that
are similar to those provided by the webpage loading apparatus as enumerated
above, and
thus no repetitions are made herein.
BRIEF DESCRIPTION OF THE DRAWINGS
[0041] The accompanying drawings illustrated herein are intended to provide a
further
understanding of the present invention and form part of the present invention.
The illustrative
embodiments of the invention and their descriptions are used to explain the
invention and do
not constitute an undue limitation of the invention. wherein:
[0042] FIG. 1 is a flowchart of a webpage loading method in Embodiment 1 of
the present
invention;
[0043] FIG. 2 is a schematic drawing showing the horizontal arrangement of the
page structures
in Embodiment 1 of the present invention;
[0044] FIG. 3 is a schematic drawing showing the target page structure is
placed at the site in
the immediate neighbor to the first page according to Embodiment 1 of the
present invention;
6
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
[0045] FIG. 4 is a schematic drawing showing the target page structure is
faded in and the first
page is faded out according to Embodiment 1 of the present invention;
[0046] FIG. 5 is a schematic drawing showing the target page structure is
completed faded in
and displayed according to Embodiment 1 of the present invention; and
[0047] FIG. 6 is a structural diagram of a webpage loading apparatus in
Embodiment 2 of the
present invention.
[0048] Elements in Drawings:
[0049] 1-Loading Unit, 2-Page Marker Unit;
[0050] 3-Controlling Unit, 4-First page Displaying Unit;
[0051] 5-Switching Processing Unit, 6-Animating Unit;
[0052] 7-Switching Unit, 8-Circulating Unit.
DETAILED DESCRIPTION OF THE INVENTION
[0053] To make the foregoing objectives, features, and advantages of the
present invention
clearer and more understandable, the technical solutions in embodiments of the
present
invention will be clearly and completely described below in conjunction with
the
accompanying drawings of embodiments of the present invention.. It is,
however, to be
understood that the embodiments referred herein are only a part of all
possible embodiments
and thus not exhaustive. Based on the embodiments of the present invention,
all other
embodiments conceived without creative labor by people of ordinary skill in
the art shall be
encompassed in the scope of the present invention.
[0054] Embodiment I
[0055] Referring to FIG. 1, the present embodiment provides a webpage loading
method,
comprising the following steps:
[0056] Step 51, pre-downloading structure codes of plural pages to be
displayed, for example,
7
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
downloading the structure codes of all pages to be displayed at a time based
on current access,
and writing the codes into a single HTML file in the unit of pages; Step S2,
associating
webpage address of each page structure, while marking the page structures with
distinctive
markers, respectively; Step S3, calling a form attribute control to arrange
the page structures
into a horizontal arrangement or a vertical arrangement according to a
sequence of the
markers; Step S4, automatically accessing the said associated webpage
addresses by using a
web control, thereby loading dynamic data of a first page, so that the first
page is displayed
and the other page structures are hidden; Step S5, detecting page switching
instructions from
a user so as to acquire a marker of a target page structure, and, based on the
marker, placing
the target page structure to a site in an immediate neighbor to the first
page; step S6, when
switching conditions are satisfied, by simulating a native switching
animation, fading in and
displaying the target page structure, while fading out and hiding the first
page; and Step S7,
when the target page structure has been fully faded in, accessing associated
webpage
addresses through the web control to request for rendering of the dynamic data
successively
and displaying a full page view.
[0057] In the webpage loading method of the present embodiment, structure
codes of pages to
be displayed are pre-downloaded. Then the downloaded structure codes are all
stored in the
same HTML file in the unit of pages. Meanwhile, webpage addresses and the
corresponding
webpage structures are associated and the page structures are distinctively
marked, so that
the form attribute control can arrange the plural page structures in order
according to the
distinctive markers. To ensure preferred user experience, a user when
activating the mobile
app has to such configure the first page that the page will be automatically
loaded and
rendered. Afterward, page switching is implemented when a page switching
instruction is
detected. Specifically, the target page structure is placed at the site in the
immediate neighbor
to the first page, so that the target page structure can be faded in and
displayed by simulating
a native switching animation when the switching conditions are satisfied and
the first page
starts to be faded out and hidden until the target page structure has been
fully faded in. Then
the web controls are called to access associated webpage address to request
for rendering of
the dynamic data successively and displaying a full page view.
8
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
[0058] It is thus clear that, as compared to the prior-art technical solution
in which for every
page an HTML file has to be correspondingly generated, the present invention
significantly
reduces the frequency of calling web controls to load webpages, and, when
entering the
functional modules, all well arranged page structures of a webpage to be
displayed can be
loaded at a time, thereby effectively shortening the waiting time during page
transition, and
eventually enabling a hybrid mobile app to display webpages with user
experience closer to
that obtained by natively developed apps.
[0059] Preferably, the foregoing embodiment further comprises:
[0060] Step S8, after the view of the target page has been fully displayed,
defining it as the first
page, and returning to the step S5. When the target page has been fully loaded
and displayed,
with the foregoing circular configuration, the steps S5 through S7 can be
performed
repeatedly, so that pre-downloaded plural page structures can be repeatedly
called to satisfy
page switching needs of the user.
[0061] Exemplarily, the foregoing page switching instructions include a
switching-to-next-
page instruction and a returning-to-previous-page instruction.
[0062] Specifically, in the foregoing embodiment, the step of detecting page
switching
instructions from a user so as to acquire a marker of a target page structure,
and, based on the
marker, placing the target page structure to a site in an immediate neighbor
to the first page
comprises:
[0063] when a said switching-to-next-page instruction/returning-to-previous-
page instruction
is detected, automatically locking the marker of the target page structure
while, based on the
marker structure, extracting associated pages and storing them in a site next
to an adjacent
site with respect to the first page, so as to update and adjust the
arrangement of the page
structures; in which a site next to the adjacent site with respect to the
first page refers to a site
horizontally adjacent to the first page or a site immediately below the first
page. By adjusting
the page arrangement at a near site, the waiting time for transition from the
first page to a
target page can be shortened, so as to make page switching smoother and
provide better user
experience.
9
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
[0064] In practical implementations, as shown in FIGs. 2-5, when a user opens
the mobile
application, structure codes of three pages to be displayed are downloaded at
a time.
Meanwhile, the codes are written into a single HTML file in the unit of pages,
and are marked
as Page 1, Page 2 and Page 3, respectively. Then a form attribute control is
called to arrange
the three page structures in a horizontal arrangement or a vertical
arrangement. For easy
understanding, a horizontal arranged is now described for example. Herein,
Page 1 is located
at the first page. When the web controls load the webpage for the first time,
Page 1 is in a
displayed state, while Page 2 and Page 3 are hidden, as shown in FIG. 2. When
a page
switching instruction from a user is detected, such as a switching instruction
that asks for
switching from Page 1 to Page 3, a form attribute control is called to adjust
the arrangement
of the pages, so that Page 3 is placed in immediate neighbor to the border of
Page 1, as shown
in FIG. 3. Then when the switching conditions are satisfied, by simulating a
native switching
animation, Page 3 is faded in and displayed while Page 1 is faded out and
hidden, as shown
in FIG. 4, until Page 3 has been fully loaded and the animation ends. At this
time, Page 1 is
hidden to reduce the bulkiness of the layered page structures, and dynamic
data are required
and rendered to show the complete page view, as shown in FIG. 5.
[0065] Embodiment 2
[0066] Referring to FIG. 1 and FIG. 6, the present embodiment provides a
webpage loading
apparatus, which comprising:
[0067] a loading unit 1, for pre-downloading structure codes of plural pages
to be displayed,
and writing the structure codes into a single HTML file in the unit of pages;
[0068] a page marker unit 2, f for associating webpage address of each page
structure, while
marking the page structures with distinctive markers, respectively;
[0069] a controlling unit 3, for calling a form attribute control to arrange
the page structures
into a horizontal arrangement or a vertical arrangement according to a
sequence of the
markers;
[0070] a first page displaying unit 4, for automatically accessing the said
associated webpage
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
addresses by using a web control, thereby loading dynamic data of a first
page, so that the
first page is displayed and the other page structures are hidden;
[0071] a switching processing unit 5, for detecting page switching
instructions from a user so
as to acquire a marker of a target page structure, and, based on the marker,
placing the target
page structure to a site in an immediate neighbor to the first page;
[0072] an animating unit 6, for when switching conditions are satisfied, by
simulating a native
switching animation, fading in the target page structure, while fading out and
hiding the first
page; and
[0073] a switching unit 7, for when the target page structure has been fully
faded in, accessing
associated webpage addresses through the web control to request for rendering
of the
dynamic data successively and displaying a full page view.
[0074] Preferably, it further comprises:
[0075] a circulating unit 8, for, after the view of the target page has been
fully displayed,
defining the target page as the first page, and responding to the switching
processing unit
again.
[0076] Preferably, the switching processing unit 5 is specifically for when a
said switching-to-
next-page instruction/returning-to-previous-page instruction is detected,
automatically
locking the marker of the target page structure while, based on the marker
structure,
extracting associated pages and storing them in a site next to an adjacent
site with respect to
the first page, so as to update and adjust the arrangement of the page
structures; in which
[0077] a site next to the adjacent site with respect to the first page refers
to a site horizontally
adjacent to the first page or a site immediately below the first page.
[0078] Specifically, the switching unit 7 is specifically for based on current
access downloading
the structure codes of all pages to be displayed at a time, and writing the
codes into a single
HTML file in the unit of pages.
[0079] As compared to the prior art, the disclosed webpage loading apparatus
provides
beneficial effects that are similar to those provided by the webpage loading
method as
11
Date Regue/Date Received 2022-09-23
CA 03176866 2022-09-23
enumerated above, and thus no repetitions are made herein.
[0080] Embodiment 3
[0081] The present embodiment provides a smart device, comprising the webpage
loading
apparatus of the previous embodiment.
[0082] As compared to the prior art, the embodiments of the present invention
provide
beneficial effects that are similar to those provided by the disclosed webpage
loading
apparatus as enumerated above, and thus no repetitions are made herein.
[0083] As will be appreciated by people of ordinary skill in the art,
implementation of all or a
part of the steps of the method of the present invention as described
previously may be
realized by instructing related hardware components by means of a program. The
program
may be stored in a computer-readable storage medium, and the program is about
performing
the individual steps of the method described in the foregoing embodiments. The
storage
medium may be a ROM/RAM, a hard drive, an optical disk, or the like.
[0084] The above are only specific embodiments of the present invention, but
the scope of
protection of the present invention is not limited to them. Any person skilled
in the art can
easily think of making modifications or replacements within the technical
scope disclosed by
the present invention, which shall be covered by the scope of protection of
the present
invention. Hence, the scope of protection of the present invention shall only
be defined by
the appended claims.
12
Date Regue/Date Received 2022-09-23
