CN109086374A - Webpage loading display method, device, terminal device and readable storage medium storing program for executing - Google Patents
Webpage loading display method, device, terminal device and readable storage medium storing program for executing Download PDFInfo
- Publication number
- CN109086374A CN109086374A CN201810812512.6A CN201810812512A CN109086374A CN 109086374 A CN109086374 A CN 109086374A CN 201810812512 A CN201810812512 A CN 201810812512A CN 109086374 A CN109086374 A CN 109086374A
- Authority
- CN
- China
- Prior art keywords
- webpage
- visible area
- occupy
- picture
- original image
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The present invention relates to a kind of webpage loading display method, device, terminal device and readable storage medium storing program for executing, the webpage loading display method includes the following steps: to obtain webpage to be shown to server；Parsing shows the webpage, wherein is predisposed to occupy-place Background for the original image in current browser non-visible area domain is located on webpage, the picture that the original image being located in visible area on webpage is predisposed to object format is shown；In response to page scroll event, the relative positional relationship of each occupy-place Background and visible area is judged, the original image for making the occupy-place Background in visible area be replaced by object format is shown.The present invention is directed to avoid disposably loading wasting excessive network request, and compression ratio is not high, larger-size picture is converted into the object format picture of high compression rate, small size, to improve loading efficiency, promotes user experience.
Description
Technical field
The present invention relates to Internet technical field more particularly to a kind of webpage loading display method, device, non-transitory meters
Calculation machine terminal device and readable storage medium storing program for executing.
Background technique
With the rapid development of mobile Internet, intelligent mobile terminal using more more and more universal, user often from
The page that other users are shared is browsed by intelligent mobile terminal in oneself chip time section, to obtain required content.
Due to often recommending picture comprising a large amount of in the page of sharing, disposable load, which need to waste many networks, is asked
It asks, and most of picture is all jpg or png format, dimension of picture is larger, and compression ratio is not high, it will lead to webpage load slowly,
To influence user experience.
Summary of the invention
To overcome the problems in correlation technique, the present invention provides a kind of webpage loading display method, device, non-provisional
Property computer terminal and readable storage medium storing program for executing.
According to a first aspect of the embodiments of the present invention, a kind of webpage loading display method is provided, is included the following steps:
Webpage to be shown is obtained to server；
Parsing shows the webpage, wherein the original image being located in current browser non-visible area domain on webpage is pre-
It is set to occupy-place Background, the picture that the original image being located in visible area on webpage is predisposed to object format is shown；
In response to page scroll event, the relative positional relationship of each occupy-place Background and visible area is judged, make visual
The original image that occupy-place Background in region is replaced by object format is shown.
It is described in one of the embodiments, that the original image on webpage in visible area is predisposed to object format
Picture the step of being shown include: first to detect during parsing the page and determine that current browser supports the target lattice
Then formula is shown the picture that the original image being located in visible area on webpage is predisposed to object format, otherwise, retain
The unprocessed form of original image is shown.
The object format is webp format in one of the embodiments, and described first detect determines current browser branch
The step of holding the object format include:
A painting canvas is created in webpage；
Insertion webp format picture is simultaneously converted；
Judge that can the webp format picture be converted into base64 format, if can, it is determined that current browser supports institute
Webp format is stated, and returns to the character string for indicating current browser support webp format picture.
The step of the relative positional relationship of each occupy-place Background of the judgement and visible area in one of the embodiments,
Suddenly include: the height for being greater than the page at a distance from page top when occupy-place Background and having rolled away, and be less than the page
The height that rolls away and the height of the visible area and, it is determined that the occupy-place Background is located at the visible area range
It is interior.
It further comprises the steps of: in one of the embodiments, the occupy-place Background for being less than preset value apart from visible area is pre-
It is loaded as the picture of object format.
In one of the embodiments, it is described in response to page scroll eventing step after, further includes: according to page scroll speed
Degree judges to determine the occupy-place Background for being located at and preloading in range, will replace with positioned at the occupy-place Background preloaded in range
The original image of object format is shown.
It is further comprised the steps of: in one of the embodiments, to having rolled away and do not loaded successful object format picture no longer
It is loaded, is not loaded successful object format picture described in and fall into visible area again.
The object format dimension of picture positioned at visible area is set according to the size of visible area in one of the embodiments,
It is fixed.
According to a second aspect of the embodiments of the present invention, a kind of webpage loaded and displayed device is provided, comprising:
Module is obtained, is configured as obtaining webpage to be shown to server；
Display module is parsed, parsing is configured as and shows the webpage, wherein will be located at that current browser is non-on webpage can
Original image in viewed area is predisposed to occupy-place Background, is predisposed to target for the original image in visible area is located on webpage
The picture of format is shown；
Respond module is configured to respond to page scroll event, judges the phase of each occupy-place Background and visible area
To positional relationship, the original image for making the occupy-place Background in visible area be replaced by object format is shown.
Described device further includes detection module in one of the embodiments, for first detecting during parsing the page
It determines that current browser supports the object format, then will be located at the original image in visible area on webpage and be predisposed to target
The picture of format is shown that otherwise, the unprocessed form for retaining original image is shown.
The object format is webp format, described device in one of the embodiments, further include:
Creation module, for creating a painting canvas in webpage；
It is inserted into module, for being inserted into webp format picture and converting；
Judgment module, for judging that can the webp format picture be converted into base64 format, if can, it is determined that current
Browser supports the object format, and returns to the character string for indicating current browser support webp format picture.
It is greater than the height that the page has rolled at a distance from page top when occupy-place Background in one of the embodiments,
Degree, and be less than the height rolled of the page and the visible area height and, it is determined that occupy-place Background position
In within the scope of the visible area.
Described device in one of the embodiments, further include:
Preloaded components, for the occupy-place Background for being less than preset value apart from visible area to be preloaded as object format
Picture.
The respond module is also used in one of the embodiments: according to page scroll speed, judging to determine occupy-place back
Scape figure preloads range, and the original image that the occupy-place Background being located in preloading range replaces with object format is given
Display.
Described device in one of the embodiments, further include:
Module is reloaded, for no longer loading to having rolled away and do not loaded successful object format picture, until institute
It states and does not load successful object format picture and fall into visible area again.
The object format dimension of picture positioned at visible area is set according to the size of visible area in one of the embodiments,
It is fixed.
According to a third aspect of the embodiments of the present invention, a kind of terminal device is provided, comprising:
Display；
Processor；
Memory for storage processor executable instruction；
Wherein, the processor is configured to:
The step of executing webpage loading display method described in any of the above-described technical solution.
According to a fourth aspect of the embodiments of the present invention, a kind of non-transitorycomputer readable storage medium is provided, when described
When instruction in storage medium is executed by the processor of mobile terminal, so that mobile terminal is able to carry out a kind of webpage loaded and displayed
Method, the method includes described in any of the above-described technical solution the step of webpage loading display method.
According to a fifth aspect of the embodiments of the present invention, a kind of application program/computer program product is provided, when the storage
When instruction in medium is executed by the processor of terminal device, so that terminal device is able to carry out a kind of webpage loaded and displayed side
Method, the method includes described in any of the above-described technical solution the step of webpage loading display method.
The technical solution that the embodiment of the present invention provides can include the following benefits: will be located at visible area on webpage
In original image be predisposed to the picture of object format and shown, and will be located in current browser non-visible area domain on webpage
Original image be predisposed to occupy-place Background, until the occupy-place Background falls into or will fall into display area, be just replaced
It is shown for the original image of object format, wastes excessive network request it is possible thereby to avoid disposably loading, and
Compression ratio is not high, larger-size picture is converted into the object format picture of high compression rate, small size, adds to accelerate the page
Speed is carried, user experience is promoted.
It should be understood that above general description and following detailed description be only it is exemplary and explanatory, not
It can the limitation present invention.
Detailed description of the invention
The drawings herein are incorporated into the specification and forms part of this specification, and shows and meets implementation of the invention
Example, and be used to explain the principle of the present invention together with specification.
Fig. 1 is a kind of flow chart of webpage loading display method shown according to an exemplary embodiment.
Fig. 2 is a kind of effect picture of webpage loading display method shown according to an exemplary embodiment.
Fig. 3 is a kind of block diagram of webpage loaded and displayed device shown according to an exemplary embodiment.
Fig. 4 is a kind of block diagram of terminal device shown according to an exemplary embodiment.
Specific embodiment
Example embodiments are described in detail here, and the example is illustrated in the accompanying drawings.Following description is related to
When attached drawing, unless otherwise indicated, the same numbers in different drawings indicate the same or similar elements.Following exemplary embodiment
Described in embodiment do not represent all embodiments consistented with the present invention.On the contrary, they be only with it is such as appended
The example of device and method being described in detail in claims, some aspects of the invention are consistent.
Fig. 1 is a kind of flow chart of webpage loading display method shown according to an exemplary embodiment, as shown in Figure 1,
The webpage loading display method is in terminal device, comprising the following steps:
In step s 11, webpage to be shown is obtained to server.
In step s 12, parsing shows the webpage, wherein will be located in current browser non-visible area domain on webpage
Original image be predisposed to occupy-place Background, the original image being located in visible area on webpage is predisposed to the figure of object format
Piece is shown.
The occupy-place Background can be the picture not comprising particular content, can be according to the content of picture to be loaded with difference
Form be shown, such as the difference in background color, saturation degree, repeatedly occur to avoid the occupy-place Background of same form,
Influence user experience；When load, the occupy-place Background need to only be occupied minimum or can be shown without occupying flow, can be from this
Machine prestores middle acquisition, when being also possible to page load, obtains together from server.The present invention is pre- in browser non-visible area domain
It is set to occupy-place Background, true address can make the length and width of picture view element quickly load and come out in data-src,
It avoids leading to the rearrangement of the page slowly since works cover picture loaded and redrawing, effectively increases page load performance.It is described
The picture that the picture of object format is high for compression ratio, size is small, such as pcx format, webp format, flc format, therefore can be quick
Load.
In some embodiments, when receiving user's click commands, after page jump, browser can be directly by visible area
The picture that original image in domain is predisposed to object format shown, or picture still in a raw is shown, and
Original image in current browser non-visible area domain is predisposed to occupy-place Background, at this point, the top of visible area is
Page top.
In step s 13, in response to page scroll event, judge the relative position of each occupy-place Background and visible area
Relationship, the original image for making the occupy-place Background in visible area be replaced by object format are shown.
The page scroll event makes the pullup or pulldown of the page when can slide touch screen or mouse rollovers for user；Each
The relative positional relationship of occupy-place Background and visible area can carry out unit conversion according to screen resolution.When the page loads, if
Occupy-place Background falls into visible area, then the address by it in data-src is substituted into src, makes the occupy-place in visible area
The original image that Background is replaced by object format is shown.It should be noted that the present invention is not limited to only to
The picture that occupy-place Background positioned at visible area replaces with object format shown, can also be as needed, to will enter
Visible area gives apart from the original image that a certain range of occupy-place Background in visible area replaces with object format
Display.
Webpage loading display method of the invention is predisposed to target lattice for the original image in visible area is located on webpage
The picture of formula is shown, and is predisposed to occupy-place background for the original image in current browser non-visible area domain is located on webpage
Figure is just replaced by the original image of object format until the occupy-place Background falls into or will fall into display area
It is shown, wastes excessive network request to avoid disposable load, and compression ratio is not high, larger-size picture is converted
At high compression rate, the object format picture of small size, to improve loading efficiency to accelerate page loading velocity, user is promoted
Experience.
Significantly subtract as shown in Fig. 2, the load time of the page has using webpage loading display method of the invention, after optimization
It is few.
In one of the embodiments, in the step S12, the original graph being located in visible area on webpage
The step of picture that piece is predisposed to object format is shown specifically includes: during parsing the page, first detection determines current
Browser supports the object format, then the original image being located in visible area on webpage is predisposed to the figure of object format
Piece is shown that otherwise, the unprocessed form for retaining original image is shown.
The object format is webp format in one of the embodiments, determines current browser in described first detect
In the step of supporting the object format, include the following steps:
A painting canvas is created in webpage.
Insertion webp format picture is simultaneously converted.
The webp provides the picture file format of lossy compression and lossless compression simultaneously, has more preferably image data
Compression algorithm can bring smaller picture volume, and possess the picture quality that naked eyes identify indifference.After tested, the nothing of webp
PNG format on damage compression ratio network has lacked 45% file size, though these PNG formats using PNGCRUSH and
PNGOU T is processed, and webp still can reduce by 28% file size.For current, webp can allow picture size flat
70% is reduced, in mobile application or web game, interface needs a large amount of pictures, therefore can pass through the decoding of insertion webp
Packet promotes access speed to save customer flow.Judge that can the webp format picture be converted into base64 format, if can,
It then determines that current browser supports the webp format, and returns to the character for indicating current browser support webp format picture
String.
In some embodiments, what a painting canvas is created in the page, and in the painting canvas be inserted into webp format picture into
Row conversion, if the webp format picture is convertible into base64 format, returning to one with data:image/webp is beginning
Character string, indicate current browser support webp format picture.
In one of the embodiments, in the relative positional relationship for judging each occupy-place Background and visible area
It in step, specifically includes: when the height that occupy-place Background has rolled away at a distance from page top greater than the page, and being less than institute
State the height of height that the page has rolled away and the visible area and, it is determined that the occupy-place Background is located at the visible area
Within the scope of domain.
The webpage loading display method, which further comprises the steps of:, in one of the embodiments, to be less than apart from visible area
The occupy-place Background of preset value is preloaded as the picture of object format.
Specifically, it can be configured to that the occupy-place Background pre-add of preset value will be less than apart from visible area in current browser
Carry be object format picture, the preset value be occupy-place Background at a distance from visible area, can according to page scroll speed,
The picture load condition of page visible area or the loading velocity adjust automatically of current page, non-visible area domain will be located in advance
Occupy-place Background replace with the picture of object format and shown, save the load time, promote user experience.
In one of the embodiments, in the step S13, after the eventing step in response to page scroll, also wrap
It includes: according to page scroll speed, judging to determine the occupy-place Background for being located at and preloading in range, be preloaded being located in range
The original image that occupy-place Background replaces with object format is shown.
After the completion of the picture for being located at visible area is loaded, model can be preloaded according to page scroll speed, adjust automatically
It encloses, and the original image that the occupy-place Background being located in preloading range replaces with object format is shown.Wherein,
When detecting that page scroll speed is fast, the occupy-place Background range shorter of required preloading；When detecting page scroll speed
When slow, the occupy-place Background range of required preloading then increases.
The loading display method further comprises the steps of: successful to having rolled away and not loaded in one of the embodiments,
Object format picture is no longer loaded, and is not loaded successful object format picture described in and is fallen into visible area again.
In some cases, since page scroll is too fast, it will lead to and be located at the occupy-place background in visible area in certain moment
Figure has little time to load, at this point, no longer loading to having rolled away and not loaded successful object format picture, still with occupy-place background
The form of figure is present in the non-visible area domain rolled away, falls into visible area again when these do not load successful object format picture
When domain, load is just re-started.
The object format dimension of picture positioned at visible area is set according to the size of visible area in one of the embodiments,
It is fixed, and identical picture loads in the same page and is no more than 10 times.
Fig. 3 is a kind of webpage loaded and displayed device block diagram shown according to an exemplary embodiment.Referring to Fig. 3, the device
Including obtaining module 21, display module 22 and respond module 23 are parsed.
The acquisition module 21 is configured as obtaining webpage to be shown to server.
The parsing display module 22 is configured as parsing and shows the webpage, wherein will be located at current browser on webpage
Original image in non-visible area domain is predisposed to occupy-place Background, is predisposed to the original image in visible area is located on webpage
The picture of object format is shown.
Opening the occupy-place Background can be the picture not comprising particular content, can be according to the content of picture to be loaded with not
Same form is shown, and such as the difference in background color, saturation degree, is repeatedly gone out to avoid the occupy-place Background of same form
It is existing, influence user experience；When load, the occupy-place Background need to only be occupied minimum or can be shown without occupying flow, can be with
Middle acquisition is prestored from the machine, when being also possible to page load, is obtained together from server.The present invention is in browser non-visible area domain
In be predisposed to occupy-place Background, true address can make the length and width of picture view element quickly load in data-src
Out, it avoids leading to the rearrangement of the page slowly since works cover picture loaded and redrawing, effectively increases page load performance.
The picture that the picture of the object format is high for compression ratio, size is small, such as pcx format, webp format, flc format, therefore can
Quickly load.
In some embodiments, when receiving user's click commands, after page jump, browser can be directly by visible area
The picture that original image in domain is predisposed to object format shown, or picture still in a raw is shown, and
Original image in current browser non-visible area domain is predisposed to occupy-place Background, at this point, the top of visible area is
Page top.
Webpage loaded and displayed device of the invention is predisposed to target lattice for the original image in visible area is located on webpage
The picture of formula is shown, and is predisposed to occupy-place background for the original image in current browser non-visible area domain is located on webpage
Figure is just replaced by the original image of object format until the occupy-place Background falls into or will fall into display area
It is shown, wastes excessive network request to avoid disposable load, and compression ratio is not high, larger-size picture is converted
At high compression rate, the object format picture of small size, to improve loading efficiency to accelerate page loading velocity, user is promoted
Experience.
The respond module 23 is configured to respond to page scroll event, judges each occupy-place Background and visible area
Relative positional relationship, the original image for making the occupy-place Background in visible area be replaced by object format are shown.
The page scroll event makes the pullup or pulldown of the page when can slide touch screen or mouse rollovers for user；Each
The relative positional relationship of occupy-place Background and visible area can carry out unit conversion according to screen resolution.When the page loads, if
Occupy-place Background falls into visible area, then the address by it in data-src is substituted into src, carries on the back the occupy-place of visible area
The original image that scape figure replaces with object format is shown.It should be noted that the present invention is not limited to only be located at
The picture that the occupy-place Background of visible area replaces with object format shown, can also be as needed, visual to that will enter
Region is shown apart from the original image that a certain range of occupy-place Background in visible area replaces with object format.
Described device further includes detection module in one of the embodiments, for first detecting during parsing the page
It determines that current browser supports the object format, then will be located at the original image in visible area on webpage and be predisposed to target
The picture of format is shown that otherwise, the unprocessed form for retaining original image is shown.
The object format is webp format, described device in one of the embodiments, further include:
Creation module, for creating a painting canvas in webpage.
It is inserted into module, for being inserted into webp format picture and converting.
The webp provides the picture file format of lossy compression and lossless compression simultaneously, has more preferably image data
Compression algorithm can bring smaller picture volume, and possess the picture quality that naked eyes identify indifference.After tested, the nothing of webp
PNG format on damage compression ratio network has lacked 45% file size, though these PNG formats using PNGCRUSH and
PNGOUT is processed, and webp still can reduce by 28% file size.For current, webp can allow picture size flat
70% is reduced, in mobile application or web game, interface needs a large amount of pictures, therefore can pass through the decoding of insertion webp
Packet promotes access speed to save customer flow.
Judgment module, for judging that can the webp format picture be converted into base64 format, if can, it is determined that current
Browser supports the object format, and returns to the character string for indicating current browser support webp format picture.
In some embodiments, it after what a painting canvas is creation module create in the page, is inserted into module and inserted in the painting canvas
Enter webp format picture and converted, if the webp format picture is convertible into base64 format, return one with
Data:image/webp is the character string of beginning, indicates that current browser supports webp format picture.
It is greater than the height that the page has rolled at a distance from page top when occupy-place Background in one of the embodiments,
Degree, and be less than the height rolled of the page and the visible area height and, it is determined that occupy-place Background position
In within the scope of the visible area.
Described device in one of the embodiments, further include:
Preloaded components, for the occupy-place Background for being less than preset value apart from visible area to be preloaded as object format
Picture.
Specifically, it can be configured to that the occupy-place Background pre-add of preset value will be less than apart from visible area in current browser
Carry be object format picture, the preset value be occupy-place Background at a distance from visible area, can according to page scroll speed,
The picture load condition of page visible area or the loading velocity adjust automatically of current page, non-visible area domain will be located in advance
Occupy-place Background replace with the picture of object format and shown, save the load time, promote user experience.
The respond module 23 is also used in one of the embodiments: according to page scroll speed, judging to determine occupy-place
Background preloads range, and the original image that the occupy-place Background being located in preloading range replaces with object format is given
With display.
After the completion of the picture for being located at visible area is loaded, model can be preloaded according to page scroll speed, adjust automatically
It encloses, and the original image that the occupy-place Background being located in preloading range replaces with object format is shown.Wherein,
When detecting that page scroll speed is fast, the occupy-place Background range shorter of required preloading；When detecting page scroll speed
When slow, the occupy-place Background range of required preloading then increases.
Described device in one of the embodiments, further include:
Module is reloaded, for no longer loading to having rolled away and do not loaded successful object format picture, until institute
It states and does not load successful object format picture and fall into visible area again.
In some cases, since page scroll is too fast, it will lead to and be located at the occupy-place background in visible area in certain moment
Figure has little time to load, at this point, the reloading module can no longer be carried out to having rolled away and not loaded successful object format picture
Load, is still present in the non-visible area domain rolled away, when these do not load successful object format in the form of occupy-place Background
When picture falls into visible area again, load is just re-started.
The object format dimension of picture positioned at visible area is set according to the size of visible area in one of the embodiments,
It is fixed, and identical picture loads in the same page and is no more than 10 times.
About the device in above-described embodiment, wherein modules execute the concrete mode of operation in related this method
Embodiment in be described in detail, no detailed explanation will be given here.
Fig. 4 is a kind of block diagram of terminal device 800 shown according to an exemplary embodiment.For example, terminal device 800
It can be mobile phone, computer, digital broadcasting terminal, messaging device, game console, tablet device, Medical Devices,
Body-building equipment, personal digital assistant etc..
Terminal device 800 may include following one or more components: display, processing component 802, memory 804, electricity
Power component 806, multimedia component 808, audio component 810, the interface 812 of input/output (I/O), sensor module 814, with
And communication component 816.
The integrated operation of the usual controlling terminal equipment 800 of processing component 802, such as with display, call, data are logical
Letter, camera operation and record operate associated operation.Processing component 802 may include one or more processors 820 to hold
Row instruction, to perform all or part of the steps of the methods described above.In addition, processing component 802 may include one or more moulds
Block, convenient for the interaction between processing component 802 and other assemblies.For example, processing component 802 may include multi-media module, with
Facilitate the interaction between multimedia component 808 and processing component 802.
Memory 804 is configured as storing various types of data to support the operation in equipment 800.These data are shown
Example includes the instruction of any application or method for operating on terminal device 800, contact data, telephone directory number
According to, message, picture, video etc..Memory 804 can by any kind of volatibility or non-volatile memory device or they
Combination realize, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM) is erasable
Programmable read only memory (EPROM), programmable read only memory (PROM), read-only memory (ROM), magnetic memory, quick flashing
Memory, disk or CD.
Power supply module 806 provides electric power for the various assemblies of terminal device 800.Power supply module 806 may include power supply pipe
Reason system, one or more power supplys and other with for terminal device 800 generate, manage, and distribute the associated component of electric power.
Multimedia component 808 includes the screen of one output interface of offer between the terminal device 800 and user.
In some embodiments, screen may include liquid crystal display (LCD) and touch panel (TP).If screen includes touch surface
Plate, screen may be implemented as touch screen, to receive input signal from the user.Touch panel includes one or more touches
Sensor is to sense the gesture on touch, slide, and touch panel.The touch sensor can not only sense touch or sliding
The boundary of movement, but also detect duration and pressure associated with the touch or slide operation.In some embodiments,
Multimedia component 808 includes a front camera and/or rear camera.When equipment 800 is in operation mode, as shot mould
When formula or video mode, front camera and/or rear camera can receive external multi-medium data.Each preposition camera shooting
Head and rear camera can be a fixed optical lens system or have focusing and optical zoom capabilities.
Audio component 810 is configured as output and/or input audio signal.For example, audio component 810 includes a Mike
Wind (MIC), when terminal device 800 is in operation mode, when such as call mode, recording mode, and voice recognition mode, microphone
It is configured as receiving external audio signal.The received audio signal can be further stored in memory 804 or via logical
Believe that component 816 is sent.In some embodiments, audio component 810 further includes a loudspeaker, is used for output audio signal.
I/O interface 812 provides interface between processing component 802 and peripheral interface module, and above-mentioned peripheral interface module can
To be keyboard, click wheel, button etc..These buttons may include, but are not limited to: home button, volume button, start button and lock
Determine button.
Sensor module 814 includes one or more sensors, for providing the state of various aspects for terminal device 800
Assessment.For example, sensor module 814 can detecte the state that opens/closes of equipment 800, the relative positioning of component, such as institute
The display and keypad that component is terminal device 800 are stated, sensor module 814 can also detect terminal device 800 or terminal
The position change of 800 1 components of equipment, the existence or non-existence that user contacts with terminal device 800,800 orientation of terminal device
Or the temperature change of acceleration/deceleration and terminal device 800.Sensor module 814 may include proximity sensor, be configured to
It detects the presence of nearby objects without any physical contact.Sensor module 814 can also include optical sensor, such as
CMOS or ccd image sensor, for being used in imaging applications.In some embodiments, which can be with
Including acceleration transducer, gyro sensor, Magnetic Sensor, pressure sensor or temperature sensor.
Communication component 816 is configured to facilitate the communication of wired or wireless way between terminal device 800 and other equipment.
Terminal device 800 can access the wireless network based on communication standard, such as WiFi, carrier network (such as 2G, 3G, 4G or 5G),
Or their combination.In one exemplary embodiment, communication component 816 receives via broadcast channel and comes from external broadcasting management
The broadcast singal or broadcast related information of system.In one exemplary embodiment, the communication component 816 further includes near field
(NFC) module is communicated, to promote short range communication.For example, radio frequency identification (RFID) technology, infrared data can be based in NFC module
Association (IrDA) technology, ultra wide band (UWB) technology, bluetooth (BT) technology and other technologies are realized.
In the exemplary embodiment, terminal device 800 can be by one or more application specific integrated circuit (ASIC), number
Word signal processor (DSP), digital signal processing appts (DSPD), programmable logic device (PLD), field programmable gate array
(FPGA), controller, microcontroller, microprocessor or other electronic components are realized, for executing the above method.
In the exemplary embodiment, a kind of non-transitorycomputer readable storage medium including instruction, example are additionally provided
It such as include the memory 804 of instruction, above-metioned instruction can be executed by the processor 820 of device 800 to complete the above method.For example,
The non-transitorycomputer readable storage medium can be ROM, random access memory (RAM), CD-ROM, tape, floppy disk
With optical data storage devices etc..
When the instruction in the storage medium is executed by the processor of mobile terminal, so that mobile terminal is able to carry out one
Kind webpage loading display method, the method includes the steps of webpage loading display method described in any of the above-described technical solution
Suddenly.
The present invention also provides a kind of application program/computer program products, when the instruction in the storage medium is by terminal
When the processor of equipment executes, so that terminal device is able to carry out a kind of webpage loading display method, the method includes above-mentioned
Described in any one technical solution the step of webpage loading display method.
Those skilled in the art after considering the specification and implementing the invention disclosed here, will readily occur to of the invention its
Its embodiment.This application is intended to cover any variations, uses, or adaptations of the invention, these modifications, purposes or
Person's adaptive change follows general principle of the invention and including the undocumented common knowledge in the art of the present invention
Or conventional techniques.The description and examples are only to be considered as illustrative, and true scope and spirit of the invention are by following
Claim is pointed out.
It should be understood that the present invention is not limited to the precise structure already described above and shown in the accompanying drawings, and
And various modifications and changes may be made without departing from the scope thereof.The scope of the present invention is limited only by the attached claims.
Claims (10)
1. a kind of webpage loading display method, which comprises the steps of:
Webpage to be shown is obtained to server；
Parsing shows the webpage, wherein is predisposed to the original image in current browser non-visible area domain is located on webpage
Occupy-place Background is shown the picture that the original image being located in visible area on webpage is predisposed to object format；
In response to page scroll event, judges the relative positional relationship of each occupy-place Background and visible area, make visible area
The original image that interior occupy-place Background is replaced by object format is shown.
2. webpage loading display method according to claim 1, which is characterized in that described to be located at visible area on webpage
In original image to be predisposed to the step of the picture of object format is shown include: during parsing the page, first detection is true
Determine current browser and support the object format, then will be located at the original image in visible area on webpage and be predisposed to target lattice
The picture of formula is shown that otherwise, the unprocessed form for retaining original image is shown.
3. webpage loading display method according to claim 2, which is characterized in that the object format is webp format,
Described first detect determines that the step of current browser supports the object format includes:
A painting canvas is created in webpage；
Insertion webp format picture is simultaneously converted；
Judge that can the webp format picture be converted into base64 format, if can, it is determined that described in current browser is supported
Webp format, and return to the character string for indicating current browser support webp format picture.
4. webpage loading display method according to claim 1, which is characterized in that each occupy-place Background of the judgement with
The step of relative positional relationship of visible area includes: to be greater than the page at a distance from page top when occupy-place Background to have rolled up
The height gone, and be less than the height that has rolled away of the page and the visible area height and, it is determined that the occupy-place is carried on the back
Scape figure is located within the scope of the visible area.
5. webpage loading display method according to claim 1, which is characterized in that further include: it will be small apart from visible area
The picture of object format is preloaded as in the occupy-place Background of preset value.
6. webpage loading display method according to claim 1, which is characterized in that described to be walked in response to page scroll event
After rapid, further includes: according to page scroll speed, judge to determine the occupy-place Background for being located at and preloading in range, pre-add will be located at
The original image that occupy-place Background in load range replaces with object format is shown.
7. webpage loading display method according to claim 1, which is characterized in that further include: to having rolled away and do not loaded
Successful object format picture is no longer loaded, and is not loaded successful object format picture described in and is fallen into visible area again
Domain.
8. a kind of webpage loaded and displayed device characterized by comprising
Module is obtained, is configured as obtaining webpage to be shown to server；
Display module is parsed, parsing is configured as and shows the webpage, wherein current browser non-visible area will be located on webpage
Original image in domain is predisposed to occupy-place Background, is predisposed to object format for the original image in visible area is located on webpage
Picture shown；
Respond module is configured to respond to page scroll event, judges the opposite position of each occupy-place Background and visible area
Relationship is set, the original image for making the occupy-place Background in visible area be replaced by object format is shown.
9. a kind of terminal device characterized by comprising
Display；
Processor；
Memory for storage processor executable instruction；
Wherein, the processor is configured to:
The step of executing webpage loading display method according to any one of claims 1 to 7.
10. a kind of non-transitorycomputer readable storage medium, which is characterized in that when the instruction in the storage medium is by moving
When the processor of terminal executes, so that mobile terminal is able to carry out a kind of webpage loading display method, the method includes rights
It is required that the step of 1 to 7 described in any item webpage loading display methods.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810812512.6A CN109086374A (en) | 2018-07-23 | 2018-07-23 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810812512.6A CN109086374A (en) | 2018-07-23 | 2018-07-23 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109086374A true CN109086374A (en) | 2018-12-25 |
Family
ID=64838056
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810812512.6A Pending CN109086374A (en) | 2018-07-23 | 2018-07-23 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109086374A (en) |
Cited By (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110059281A (en) * | 2019-04-11 | 2019-07-26 | 腾讯科技（深圳）有限公司 | Image display method, device, terminal and computer readable storage medium |
| CN110868624A (en) * | 2019-11-08 | 2020-03-06 | 青岛海信传媒网络技术有限公司 | Picture loading method and smart television |
| CN111080728A (en) * | 2019-12-19 | 2020-04-28 | 上海米哈游天命科技有限公司 | Map processing method, device, equipment and storage medium |
| CN111083552A (en) * | 2019-12-30 | 2020-04-28 | 上海闻泰信息技术有限公司 | Thumbnail generation method, device, equipment and medium |
| CN111159604A (en) * | 2019-12-30 | 2020-05-15 | 北京三快在线科技有限公司 | Picture resource loading method and device |
| CN111198999A (en) * | 2020-01-03 | 2020-05-26 | 北京字节跳动网络技术有限公司 | Method, device, medium and electronic equipment for loading pictures of webpage end |
| CN111241435A (en) * | 2019-12-31 | 2020-06-05 | 五八有限公司 | Method and device for loading picture elements |
| CN111259289A (en) * | 2020-01-15 | 2020-06-09 | 北京达佳互联信息技术有限公司 | Picture loading method and device, electronic equipment and storage medium |
| CN111427504A (en) * | 2020-04-02 | 2020-07-17 | 北京达佳互联信息技术有限公司 | Content acquisition method and device, electronic equipment and storage medium |
| CN111562894A (en) * | 2019-02-14 | 2020-08-21 | 阿里巴巴集团控股有限公司 | Layer display method, device and equipment |
| CN112182449A (en) * | 2020-09-07 | 2021-01-05 | 北京达佳互联信息技术有限公司 | Page loading method and device, electronic equipment and storage medium |
| CN112417339A (en) * | 2020-12-02 | 2021-02-26 | 北京齐尔布莱特科技有限公司 | Page loading method and device, computing equipment and readable storage medium |
| CN112612964A (en) * | 2020-12-31 | 2021-04-06 | 武汉悦学帮网络技术有限公司 | Picture display method and device, computer equipment and storage medium |
| CN112765505A (en) * | 2021-01-21 | 2021-05-07 | 青岛以萨数据技术有限公司 | Data loading method and device and storage medium |
| CN112800372A (en) * | 2021-02-03 | 2021-05-14 | 网易（杭州）网络有限公司 | Page loading method and device and electronic equipment |
| CN112926009A (en) * | 2021-03-29 | 2021-06-08 | 建信金融科技有限责任公司 | Picture resource processing method and device, electronic equipment and medium |
| CN112925703A (en) * | 2021-01-26 | 2021-06-08 | 北京达佳互联信息技术有限公司 | Method, device, equipment and storage medium for detecting browser supported by website |
| CN113032696A (en) * | 2019-12-05 | 2021-06-25 | 北京沃东天骏信息技术有限公司 | Display method and display device of page picture |
| CN114036419A (en) * | 2021-11-10 | 2022-02-11 | 中国建设银行股份有限公司 | Webpage picture resource processing method and device |
| CN114095783A (en) * | 2021-11-29 | 2022-02-25 | 中国平安财产保险股份有限公司 | Picture uploading method and device, computer equipment and storage medium |
| CN114416209A (en) * | 2022-01-25 | 2022-04-29 | 爱集微咨询(厦门)有限公司 | Page loading method and device and readable storage medium |
| CN114528057A (en) * | 2022-01-07 | 2022-05-24 | 南方电网深圳数字电网研究院有限公司 | Page loading method and device |
| CN114969590A (en) * | 2022-05-25 | 2022-08-30 | 浪潮卓数大数据产业发展有限公司 | Picture display processing method, equipment and medium |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103139292A (en) * | 2013-01-22 | 2013-06-05 | 深圳市深信服电子科技有限公司 | Method for processing pictures in hyper text transmission protocol (HTTP) proxy and proxy server and system |
-
2018
- 2018-07-23 CN CN201810812512.6A patent/CN109086374A/en active Pending
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103139292A (en) * | 2013-01-22 | 2013-06-05 | 深圳市深信服电子科技有限公司 | Method for processing pictures in hyper text transmission protocol (HTTP) proxy and proxy server and system |
Non-Patent Citations (1)
| Title |
|---|
| CODEL: "《web性能优化之图片延迟加载》", 《HTTPS://WWW.CNBLOGS.COM/CODELIR/P/5140191.HTML》 * |
Cited By (33)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111562894A (en) * | 2019-02-14 | 2020-08-21 | 阿里巴巴集团控股有限公司 | Layer display method, device and equipment |
| CN110059281A (en) * | 2019-04-11 | 2019-07-26 | 腾讯科技（深圳）有限公司 | Image display method, device, terminal and computer readable storage medium |
| CN110059281B (en) * | 2019-04-11 | 2022-11-29 | 腾讯科技（深圳）有限公司 | Picture display method, device, terminal and computer readable storage medium |
| CN110868624A (en) * | 2019-11-08 | 2020-03-06 | 青岛海信传媒网络技术有限公司 | Picture loading method and smart television |
| CN110868624B (en) * | 2019-11-08 | 2023-08-22 | Vidaa(荷兰)国际控股有限公司 | Picture loading method and intelligent television |
| CN113032696A (en) * | 2019-12-05 | 2021-06-25 | 北京沃东天骏信息技术有限公司 | Display method and display device of page picture |
| CN111080728A (en) * | 2019-12-19 | 2020-04-28 | 上海米哈游天命科技有限公司 | Map processing method, device, equipment and storage medium |
| CN111159604A (en) * | 2019-12-30 | 2020-05-15 | 北京三快在线科技有限公司 | Picture resource loading method and device |
| CN111083552A (en) * | 2019-12-30 | 2020-04-28 | 上海闻泰信息技术有限公司 | Thumbnail generation method, device, equipment and medium |
| CN111241435B (en) * | 2019-12-31 | 2024-02-27 | 五八有限公司 | Method and device for loading picture elements |
| CN111241435A (en) * | 2019-12-31 | 2020-06-05 | 五八有限公司 | Method and device for loading picture elements |
| CN111198999A (en) * | 2020-01-03 | 2020-05-26 | 北京字节跳动网络技术有限公司 | Method, device, medium and electronic equipment for loading pictures of webpage end |
| CN111259289B (en) * | 2020-01-15 | 2024-04-30 | 北京达佳互联信息技术有限公司 | Picture loading method and device, electronic equipment and storage medium |
| CN111259289A (en) * | 2020-01-15 | 2020-06-09 | 北京达佳互联信息技术有限公司 | Picture loading method and device, electronic equipment and storage medium |
| US20220343056A1 (en) * | 2020-01-15 | 2022-10-27 | Beijing Dajia Internet Information Technology Co., Ltd. | Method for loading image and electronic device |
| WO2021143828A1 (en) * | 2020-01-15 | 2021-07-22 | 北京达佳互联信息技术有限公司 | Image loading method and electronic device |
| US11474689B2 (en) | 2020-04-02 | 2022-10-18 | Beijing Dajia Internet Information Technology Co., Ltd. | Method and apparatus for obtaining content |
| CN111427504A (en) * | 2020-04-02 | 2020-07-17 | 北京达佳互联信息技术有限公司 | Content acquisition method and device, electronic equipment and storage medium |
| CN112182449A (en) * | 2020-09-07 | 2021-01-05 | 北京达佳互联信息技术有限公司 | Page loading method and device, electronic equipment and storage medium |
| CN112417339A (en) * | 2020-12-02 | 2021-02-26 | 北京齐尔布莱特科技有限公司 | Page loading method and device, computing equipment and readable storage medium |
| CN112612964A (en) * | 2020-12-31 | 2021-04-06 | 武汉悦学帮网络技术有限公司 | Picture display method and device, computer equipment and storage medium |
| CN112765505A (en) * | 2021-01-21 | 2021-05-07 | 青岛以萨数据技术有限公司 | Data loading method and device and storage medium |
| CN112925703A (en) * | 2021-01-26 | 2021-06-08 | 北京达佳互联信息技术有限公司 | Method, device, equipment and storage medium for detecting browser supported by website |
| CN112800372A (en) * | 2021-02-03 | 2021-05-14 | 网易（杭州）网络有限公司 | Page loading method and device and electronic equipment |
| CN112926009B (en) * | 2021-03-29 | 2024-08-06 | 建信金融科技有限责任公司 | Picture resource processing method and device, electronic equipment and medium |
| CN112926009A (en) * | 2021-03-29 | 2021-06-08 | 建信金融科技有限责任公司 | Picture resource processing method and device, electronic equipment and medium |
| CN114036419A (en) * | 2021-11-10 | 2022-02-11 | 中国建设银行股份有限公司 | Webpage picture resource processing method and device |
| CN114095783A (en) * | 2021-11-29 | 2022-02-25 | 中国平安财产保险股份有限公司 | Picture uploading method and device, computer equipment and storage medium |
| CN114528057A (en) * | 2022-01-07 | 2022-05-24 | 南方电网深圳数字电网研究院有限公司 | Page loading method and device |
| CN114528057B (en) * | 2022-01-07 | 2024-07-19 | 南方电网数字平台科技(广东)有限公司 | Page loading method and device |
| CN114416209A (en) * | 2022-01-25 | 2022-04-29 | 爱集微咨询(厦门)有限公司 | Page loading method and device and readable storage medium |
| CN114969590B (en) * | 2022-05-25 | 2024-04-26 | 浪潮卓数大数据产业发展有限公司 | Picture display processing method, device and medium |
| CN114969590A (en) * | 2022-05-25 | 2022-08-30 | 浪潮卓数大数据产业发展有限公司 | Picture display processing method, equipment and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109086374A (en) | Webpage loading display method, device, terminal device and readable storage medium storing program for executing | |
| CN106970754B (en) | Screen capture processing method and device | |
| WO2018058728A1 (en) | Content sharing method and apparatus | |
| US20180121040A1 (en) | Method and device for managing notification messages | |
| CN104636106B (en) | Image display method and device, terminal device | |
| EP3337146B1 (en) | Method and apparatus for displaying notification message | |
| CN106896991B (en) | Method and device for updating information | |
| WO2017084183A1 (en) | Information displaying method and device | |
| EP3128411B1 (en) | Interface display method, terminal, computer program and recording medium | |
| CN107203398B (en) | Application distribution method and device | |
| CN107193606B (en) | Application distribution method and device | |
| WO2015143806A1 (en) | Previous page return control method and device | |
| JP6838138B2 (en) | Product display method and equipment | |
| CN106528617B (en) | A kind of method and device that Web page picture is shown | |
| CN105912450B (en) | Application state information display method and device | |
| CN105786507B (en) | Display interface switching method and device | |
| WO2016011749A1 (en) | Off-line update method and device for light application, and terminal | |
| CN110262692B (en) | Touch screen scanning method, device and medium | |
| CN105487680B (en) | Method, apparatus and terminal for terminal screenshotss | |
| CN106547547B (en) | data acquisition method and device | |
| CN106033397B (en) | Memory buffer area adjusting method, device and terminal | |
| CN107193441B (en) | Desktop pendant previewing method and device | |
| US20220343056A1 (en) | Method for loading image and electronic device | |
| CN104468760A (en) | Method and device for pushing reminding information | |
| CN106331328B (en) | Information prompting method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |