CN113032696A - Display method and display device of page picture - Google Patents
Display method and display device of page picture Download PDFInfo
- Publication number
- CN113032696A CN113032696A CN201911235026.3A CN201911235026A CN113032696A CN 113032696 A CN113032696 A CN 113032696A CN 201911235026 A CN201911235026 A CN 201911235026A CN 113032696 A CN113032696 A CN 113032696A
- Authority
- CN
- China
- Prior art keywords
- picture
- visual
- page
- path
- display
- 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
- 238000000034 method Methods 0.000 title claims abstract description 37
- 230000000007 visual effect Effects 0.000 claims abstract description 112
- 238000012360 testing method Methods 0.000 claims description 39
- 238000004364 calculation method Methods 0.000 claims description 9
- 238000004590 computer program Methods 0.000 claims description 9
- 238000012986 modification Methods 0.000 claims description 9
- 230000004048 modification Effects 0.000 claims description 9
- 238000012216 screening Methods 0.000 claims description 6
- 230000000694 effects Effects 0.000 abstract description 11
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 238000009877 rendering Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
The invention discloses a display method and a display device of a page picture, and relates to the technical field of computers. One embodiment of the method comprises: determining a visual occupying bitmap element positioned in a current visual area in a page; acquiring screen multiplying power and the logic resolution of visible occupied bitmap elements; calculating the display resolution of the page picture corresponding to the visible occupied bitmap element according to the logic resolution and the screen magnification; and modifying the picture path of the visual occupied bitmap element based on the display resolution so as to load and display the page picture. According to the method and the device, the display resolution of the page picture in each terminal can be calculated according to the screen magnification of the terminal, so that the optimal display effect can be obtained for each terminal.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a display method and a display device of a page picture.
Background
When a webpage loads picture elements, the current scheme adopted by a terminal browser generally has two modes, one mode is to solidify the width and the height of the picture elements, and the size, the width and the height ratio of the picture elements are not changed no matter how large the screen is; another is to adapt one picture size to the size of many different screens.
In the process of implementing the invention, the inventor finds that at least the following problems exist in the prior art:
the larger the screen, the more blank is left; the sharpness of the picture is poor.
Disclosure of Invention
In view of this, embodiments of the present invention provide a method and a device for displaying a page picture, which can calculate a display resolution of the page picture at each terminal according to a screen magnification of the terminal, so that each terminal obtains an optimal display effect.
To achieve the above object, according to an aspect of an embodiment of the present invention, a method for displaying a page picture is provided.
The method for displaying the page picture comprises the following steps:
determining a visual occupying bitmap element positioned in a current visual area in a page;
acquiring the logic resolution and screen magnification of the visual occupied bitmap element;
calculating the display resolution of the page picture corresponding to the visual occupied bitmap element according to the logic resolution and the screen magnification;
and modifying the picture path of the visual occupied bitmap element based on the display resolution so as to load and display the page picture.
Optionally, determining the visible occupied bitmap element in the current visible region in the page includes:
acquiring placeholder pixels in a page, and setting picture tags of the placeholder pixels; wherein the picture tag comprises a placeholder map path and a picture path;
acquiring the visible area upper margin and the visible area height of the current visible area in the page, and calculating the visible area lower margin of the current visible area based on the visible area upper margin and the visible area height;
acquiring the upper edge distance of the pixel of the occupied bitmap element with the picture path being a non-null value;
and screening out the visual occupied bitmap element positioned in the current visual area based on the primitive element upper edge distance, the visual area upper edge distance and the visual area lower edge distance.
Optionally, the logical resolution comprises a logical pixel width and a logical pixel height, the display resolution comprises a display pixel width and a display pixel height, an
Calculating the display resolution of the page picture corresponding to the visual occupied bitmap element according to the logic resolution and the screen magnification, wherein the calculation comprises the following steps:
acquiring a page picture corresponding to the visual placeholder element according to the picture path of the visual placeholder bitmap element;
multiplying the logic pixel width by the screen multiplying power to obtain the display pixel width of the page picture;
and multiplying the logic pixel height by the screen multiplying power to obtain the display pixel height of the page picture.
Optionally, modifying the picture path of the visual occupancy bitmap element based on the display resolution comprises:
determining a size position of a picture path of the visual occupancy bitmap element;
modifying a value of the dimension location based on the display pixel width and the display pixel height.
Optionally, after modifying the picture path of the visible occupancy bitmap element based on the display resolution, the method further includes:
generating a picture test object, and setting a picture path of the visual occupation bitmap element as a test path of the picture test object;
loading the picture test object according to the test path;
if the loading is successful, saving the picture path of the visible bit map element;
if the loading fails, changing the picture path of the visual occupation bitmap element into the occupation map path of the visual occupation bitmap element.
To achieve the above object, according to still another aspect of the embodiments of the present invention, there is provided a display device of page pictures.
The display device of the page picture in the embodiment of the invention comprises:
the determining module is used for determining the visible occupied bitmap element positioned in the current visible area in the page;
the acquisition module is used for acquiring the logic resolution and the screen magnification of the visual bitmap element;
the calculation module is used for calculating the display resolution of the page picture corresponding to the visual occupation bitmap element according to the logic resolution and the screen magnification;
and the modification module is used for modifying the picture path of the visual occupied bitmap element based on the display resolution so as to load and display the page picture.
Optionally, the determining module is further configured to:
acquiring placeholder pixels in a page, and setting picture tags of the placeholder pixels; wherein the picture tag comprises a placeholder map path and a picture path;
acquiring the visible area upper margin and the visible area height of the current visible area in the page, and calculating the visible area lower margin of the current visible area based on the visible area upper margin and the visible area height;
acquiring the upper edge distance of the pixel of the occupied bitmap element with the picture path being a non-null value;
and screening out the visual occupied bitmap element positioned in the current visual area based on the primitive element upper edge distance, the visual area upper edge distance and the visual area lower edge distance.
Optionally, the logical resolution comprises a logical pixel width and a logical pixel height, the display resolution comprises a display pixel width and a display pixel height, an
The calculation module is further to:
acquiring a page picture corresponding to the visual placeholder element according to the picture path of the visual placeholder bitmap element;
multiplying the logic pixel width by the screen multiplying power to obtain the display pixel width of the page picture;
and multiplying the logic pixel height by the screen multiplying power to obtain the display pixel height of the page picture.
Optionally, the modification module is further configured to:
determining a size position of a picture path of the visual occupancy bitmap element;
modifying a value of the dimension location based on the display pixel width and the display pixel height.
Optionally, the display device further includes a testing module, configured to:
generating a picture test object, and setting a picture path of the visual occupation bitmap element as a test path of the picture test object;
loading the picture test object according to the test path;
if the loading is successful, saving the picture path of the visible bit map element;
if the loading fails, changing the picture path of the visual occupation bitmap element into the occupation map path of the visual occupation bitmap element.
To achieve the above object, according to still another aspect of the embodiments of the present invention, there is provided an electronic device for displaying a page picture.
The electronic equipment for displaying the page picture comprises: one or more processors; the storage device is used for storing one or more programs, and when the one or more programs are executed by the one or more processors, the one or more processors realize the display method of the page picture.
To achieve the above object, according to still another aspect of embodiments of the present invention, there is provided a computer-readable storage medium.
A computer-readable storage medium of an embodiment of the present invention stores thereon a computer program, which when executed by a processor implements a method for displaying a page picture of an embodiment of the present invention.
One embodiment of the above invention has the following advantages or benefits: because the visual occupying bitmap element positioned in the current visual area in the determined page is adopted; acquiring screen multiplying power and the logic resolution of visible occupied bitmap elements; calculating the display resolution of the page picture corresponding to the visible occupied bitmap element according to the logic resolution and the screen magnification; modifying the picture path of the visible bitmap element based on the display resolution to carry out loading display on the page picture, so that the larger the screen is, the more the left blank is; the technical problem of poor definition of the pictures is solved, and the display resolution of the page pictures at each terminal is calculated according to the screen magnification of the terminal, so that each terminal can obtain the optimal display effect.
Further effects of the above-mentioned non-conventional alternatives will be described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
fig. 1 is a schematic diagram of main steps of a display method of a page picture according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of an implementation framework of a display method of a page picture according to an embodiment of the present invention;
fig. 3 is a schematic view of a main flow of a display method of a page picture according to a referential embodiment of the present invention;
FIG. 4 is a schematic diagram of the main modules of a display device of page pictures according to an embodiment of the present invention;
FIG. 5 is an exemplary system architecture diagram in which embodiments of the present invention may be employed;
fig. 6 is a schematic block diagram of a computer system suitable for use in implementing a terminal device or server of an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, in which various details of embodiments of the invention are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
It should be noted that the embodiments of the present invention and the technical features of the embodiments may be combined with each other without conflict.
The picture adapts to different terminals, and two processing methods commonly used in the prior art are as follows:
one is to solidify the width and height of the picture element, the size aspect ratio of the picture element is not changed no matter how large the screen is, for example, the aspect ratio of the picture element of the current web page is fixed to 120x120 pixels (px), and the aspect ratio of the original picture is 240x240px, then the picture has the rendered aspect ratio of 120x120 px in the screen of 320x568 px, 360x640 px, 375x667 px or 414x736 px, etc. For terminals such as mobile phones, the size of the screen is small, and reasonable utilization of each position of the screen needs to be considered, and if rendering is performed in this way, the aspect ratio of picture elements is usually set to be small, so that the larger the screen is, the more blank spaces are left;
another is to adapt the size of many different screens with one picture size, for example, the aspect ratio of the original picture is 750x200px, the rendered aspect ratios are 320x85.33px, 360x96px, 375x100px, 414x110.39px in the screens of 320x568 px, 360x640 px, 375x667 px, 414x736 px, etc. If the rendering is performed in this way, although the picture can be adapted to different screen sizes, the problem of picture stretching or picture compressing occurs only with a fixed picture size, and there is a certain resource loss, which causes the picture to be degraded in definition (blurred).
In order to solve the blank leaving problem of fixed adaptation and solve the problem of blurring caused by compression and stretching when the picture is adapted to various browsers, the page picture display method provided by the embodiment of the invention utilizes the logic resolution rendered by the occupied bitmap and combines the screen magnification of each terminal to calculate the optimal picture size required by enabling each terminal to have the optimal display effect, distinguishes page pictures with different sizes through picture paths, and obtains the page picture with the correct size when loading.
Fig. 1 is a schematic diagram illustrating main steps of a method for displaying a page picture according to an embodiment of the present invention.
As shown in fig. 1, the method for displaying a page picture according to the embodiment of the present invention mainly includes the following steps:
step S101: and determining the visual occupied bitmap element positioned in the current visual area in the page.
Generally, the size of a page is larger than the screen size of a terminal such as a mobile phone, so that only a part of the page loaded on the terminal is displayed, and a display area on the page that can be directly seen by a user is called a current visible area. The occupation bitmap element is an element for forming a page rendering picture, the page containing the picture can be set at the position for displaying the picture, a lazy loading mode is adopted when a user accesses the page, namely, in the loaded page, the visual occupation bitmap element positioned in the current visual area can load an actual page picture, the occupation bitmap element not positioned in the current visual area can load a substituted occupation map, the user rolls the page to be used, and the page picture corresponding to the actual page picture is loaded after the original occupation bitmap element positioned in the non-visual area enters the current visual area. The lazy loading mode can prepare for adapting the sizes of multiple terminals for pictures; the page can be quickly supported, the user can be quickly reflected visually, the loading of some picture resources which are not in the current visual area is reduced, and the flow loss of the user is reduced.
In the embodiment of the present invention, step S101 may be implemented in the following manner: initializing a page; acquiring placeholder pixels in a page, and setting picture tags occupying the bitmap elements; acquiring the upper margin of the visual area and the height of the visual area of the current visual area in the page, and calculating the lower margin of the visual area of the current visual area based on the upper margin of the visual area and the height of the visual area; acquiring the upper margin of a pixel occupying bitmap elements with a non-null picture path; and screening out the visual occupied bitmap element positioned in the current visual area based on the primitive element upper edge distance, the visual area upper edge distance and the visual area lower edge distance.
The image tags comprise bitmap occupying paths and image paths, the bitmap occupying paths are loading paths occupying bitmaps, and the image paths are loading paths of page images. When a user accesses a page through a browser and the like, DOM loading, CSS loading, JavaScript loading and the like of the page are carried out firstly; then, loading a default picture (namely a preset occupation bitmap) in a picture in a page in a lazy loading mode, namely replacing a page picture which needs to be displayed actually with a fixed occupation map before the actual picture loading of the occupation bitmap element is finished, and therefore, setting an occupation map path and a picture path for each occupation bitmap element, and in addition, if the page picture needs not to be displayed in the page, setting a loading path to be empty; when loading a page picture, determining a visible occupied bitmap element located in a current visible area, as a preferred implementation, obtaining the size of the topmost distance of the current visible area in a non-browser environment (JavaScript) by "document. Then obtaining the height of the current visible area through "document. Thus, the lower margin of the visible area can be calculated by utilizing the two data; and finally, acquiring the upper margin of the pixel occupying the bitmap element, wherein the upper margin of the pixel is between the upper margin and the lower margin of the visual area, and the placeholder pixel with a specific value of the picture path is the visual occupying bitmap element.
Step S102: and acquiring the logic resolution and the screen magnification of the visual occupied bitmap element.
The screen resolution refers to the resolution of the screen display. The screen resolution determines the setting of how much information is displayed on a computer screen, measured in horizontal and vertical pixels, and for a screen of the same size, when the screen resolution is low (e.g., 640x 480), there are few pixels displayed on the screen and the size of a single pixel is large, and when the screen resolution is high (e.g., 1600x 1200), there are many pixels displayed on the screen and the size of a single pixel is small.
Logical resolution: is reachable by a browser or software and is also a cs pixel; the 1px and 1px regions of the cell phone, which are displayed by the on-screen display elements, may be several, and may be 1, 4 or 9, depending on the screen, and the logical resolution refers to the minimum number of these display elements.
The screen magnification is a contrast value between the screen resolution and the logical resolution, and as a preferred embodiment, the contrast value can be obtained in JavaScript by "window.
And after the visible occupied bitmap elements are screened out, acquiring the logic resolution of the area needing to load the page picture corresponding to the screen, and simultaneously acquiring the screen magnification of the terminal so as to further calculate the screen resolution of the area.
Step S103: and calculating the display resolution of the page picture corresponding to the visible occupied bitmap element according to the logic resolution and the screen magnification.
Since the screen magnification is a contrast value between the screen resolution and the logical resolution, after the screen magnification and the logical resolution of the visible placeholder image element are obtained, the screen resolution corresponding to the visible placeholder image element can be calculated, and the screen resolution is the display resolution for enabling the page picture to achieve the best display effect on one terminal.
In the embodiment of the present invention, step S103 may be implemented in the following manner: acquiring a page picture corresponding to the visual placeholder element according to the picture path of the visual placeholder bitmap element; multiplying the logic pixel width by the screen multiplying power to obtain the display pixel width of the page picture; and multiplying the logic pixel height by the screen multiplying power to obtain the display pixel height of the page picture.
Wherein the logical resolution includes a logical pixel width and a logical pixel height, and the display resolution includes a display pixel width and a display pixel height. During calculation, the width and height of the logic pixel are multiplied by the magnification of the screen respectively, and the width and height of the display pixel can be obtained.
Step S104: and modifying the picture path of the visual occupied bitmap element based on the display resolution so as to load and display the page picture.
The image path of the page image is used for representing the storage position of the page image and is also a path for calling the page image, different sizes of the same page image can be distinguished through the image path, and each terminal corresponding to the same page image is provided with an image path with a corresponding size.
In the embodiment of the present invention, the step of modifying the picture path of the visible bitmap element based on the display resolution may be implemented in the following manner: determining the size position of a picture path of a visual occupied bitmap element; the value of the size location is modified based on the display pixel width and the display pixel height.
The picture path has a size position for controlling the actual size of the page picture, and the size position of the picture path is modified according to the display resolution obtained in step S103, that is, the path of the combination call page picture is reset.
The method for displaying the page picture in the embodiment of the invention can further comprise the following steps: generating a picture test object, and setting a picture path of the visible bit map element as a test path of the picture test object; loading a picture test object according to the test path; if the loading is successful, saving the picture path of the visible occupied bitmap element; and if the loading fails, changing the picture path of the visible occupation bitmap element into the occupation map path of the visible occupation bitmap element.
After the size of the page picture is obtained and set through the steps S101-S104, the page picture can be tested, namely a picture test object is newly generated, the picture path obtained in the step S104 is used as a test path of the picture test object, the picture test object is loaded according to the test path, if the loading is successful, the picture path can be used, and the picture path can be fixed as the picture path of the page picture; if the loading fails, the picture path is not available, and in order to ensure the overall display effect of the page, a placeholder map can be used for alternative display. The path of the placeholder map is a storage position of the placeholder map and is a path for calling the placeholder map.
According to the method for displaying the page picture, the visual occupied bitmap element positioned in the current visual area in the page is determined; acquiring screen multiplying power and the logic resolution of visible occupied bitmap elements; calculating the display resolution of the page picture corresponding to the visible occupied bitmap element according to the logic resolution and the screen magnification; modifying the picture path of the visible bitmap element based on the display resolution to carry out loading display on the page picture, so that the larger the screen is, the more the left blank is; the technical problem of poor definition of the pictures is solved, and the display resolution of the page pictures at each terminal is calculated according to the screen magnification of the terminal, so that each terminal can obtain the optimal display effect.
In order to further illustrate the technical idea of the present invention, the technical solution of the present invention will now be described with reference to specific application scenarios.
As shown in fig. 2, the method for displaying a page picture according to the embodiment of the present invention mainly includes three steps of acquiring data parameters, setting parameters, and displaying data, where:
1. acquiring data, namely acquiring the occupying bitmap element of the current visible region, acquiring the width and height (namely, the logical resolution) of the corresponding logical pixel through the occupying bitmap element, and calculating the actual picture width and height (namely, the display resolution) required by the region corresponding to the current occupying bitmap element by combining the screen magnification.
2. And parameter setting, namely adjusting the picture address by combining the actually required picture aspect ratio acquired in the first step, enabling each corresponding terminal to have a path corresponding to the picture src in size by setting the path of the picture src (namely, the picture path), then dynamically generating an image object, and setting the _ src attribute of the image object as the path of the picture src.
3. And displaying data, loading the image object, setting the path of the image src to the image path occupying the bitmap element if the loading is successful, displaying a page, resetting the src address of the image as the address of the bitmap if the loading is failed, and reloading.
As shown in fig. 3, when the method for displaying a page picture according to the embodiment of the present invention is applied, the following process may be referred to:
firstly, initializing and loading a page, when a user accesses the page through a browser, performing DOM (document object model) loading, CSS (cascading style sheets) loading, JavaScript loading and the like on the page, and after the resource loading is completed, loading a default picture (namely an occupied bitmap) by the picture in a lazy loading mode, namely dynamically adding a picture tag (namely an img tag) to an occupied bitmap element, and setting a src attribute and a _ src attribute of the img tag, wherein the value of the src attribute is set as a placeholder path, and the value of the _ src attribute is set as an actual picture path;
secondly, after the page is loaded, staying at the current page (i.e. the current visible area), and through document, body, scrolltop in JavaScript, scrolltop is the height of the part of the content in the element which exceeds the upper boundary of the element, which can be understood as the height of the part of the page rolled up, and is defined as the upper margin domT of the visible area of the current visible area; and then through document, document element, clientHeight, which is the height of the visible area of the current visible area, namely the height of the area where the content can be seen in the page browser; thus, the lower margin dolL of the visual area of the current visual area can be calculated through the two data;
thirdly, acquiring a placeholder pixel of which the page has the _ src attribute, acquiring an edge margin elemH above the placeholder pixel occupying the bitmap element, and if the elemH is between domT and dommL, positioning the current placeholder bitmap element in the current visible area;
then, circularly traversing the occupying bitmap element in the current visible area to obtain the width and height of the logic pixel corresponding to the visible occupying bitmap element; meanwhile, obtaining the magnification of the screen, namely the ratio of physical pixels and logical pixels on the terminal, and defining the value as a variable pr; multiplying the pr value by the width of the logic pixel and the height of the logic pixel to obtain the actual pixel size (namely the display resolution) of the picture, which is required by the optimal display effect of the page picture corresponding to each visible occupation bitmap element on the terminal;
then, an actually required picture path is set, for example, the value of the original _ src attribute is: https:// img14.360buyimg. com/n2/s240x240_ jfs/t1/4009/18/6575/309253/5ba36753E716b41a3/ed3f22f1981a8908. jpg! q70.jpg, wherein 240x240 is located at a size position for controlling the actual size of the picture, and the path is reset and combined by combining the actual pixel size of the picture calculated in the last step;
finally, generating a picture test object (image), taking the picture address set in the last step as the _ src attribute of the image, and then sending a request for picture resources (namely, loading the image); if the image is loaded successfully, a success event is triggered, and in a callback function of the success event, the image address can be assigned to the current occupying bitmap element (namely, the visible occupying bitmap element) to realize the adaptive display of the page image; if the image loading fails, an onerror event is triggered, and in a callback function of the onerror event, the current _ src address of the occupied bitmap element can be reset as the address of the placeholder.
Fig. 4 is a schematic diagram of main blocks of a display device of a page picture according to an embodiment of the present invention.
As shown in fig. 4, the display device 400 of page pictures according to the embodiment of the present invention includes: a determination module 401, an acquisition module 402, a calculation module 403 and a modification module 404.
Wherein,
a determining module 401, configured to determine a visible occupied bitmap element located in a current visible region in a page;
an obtaining module 402, configured to obtain a logical resolution and a screen magnification of the visible bitmap element;
a calculating module 403, configured to calculate, according to the logical resolution and the screen magnification, a display resolution of a page picture corresponding to the visible occupancy bitmap element;
a modifying module 404, configured to modify a picture path of the visible occupation bitmap element based on the display resolution, so as to load and display the page picture.
In this embodiment of the present invention, the determining module 401 may further be configured to:
acquiring placeholder pixels in a page, and setting picture tags of the placeholder pixels; wherein the picture tag comprises a placeholder map path and a picture path;
acquiring the visible area upper margin and the visible area height of the current visible area in the page, and calculating the visible area lower margin of the current visible area based on the visible area upper margin and the visible area height;
acquiring the upper edge distance of the pixel of the occupied bitmap element with the picture path being a non-null value;
and screening out the visual occupied bitmap element positioned in the current visual area based on the primitive element upper edge distance, the visual area upper edge distance and the visual area lower edge distance.
Further, the logical resolution includes a logical pixel width and a logical pixel height, and the display resolution includes a display pixel width and a display pixel height.
In this embodiment of the present invention, the calculating module 403 may further be configured to:
acquiring a page picture corresponding to the visual placeholder element according to the picture path of the visual placeholder bitmap element;
multiplying the logic pixel width by the screen multiplying power to obtain the display pixel width of the page picture;
and multiplying the logic pixel height by the screen multiplying power to obtain the display pixel height of the page picture.
In this embodiment of the present invention, the modifying module 404 may further be configured to:
determining a size position of a picture path of the visual occupancy bitmap element;
modifying a value of the dimension location based on the display pixel width and the display pixel height.
In the embodiment of the present invention, the display apparatus 400 may further include a testing module (not shown) for:
generating a picture test object, and setting a picture path of the visual occupation bitmap element as a test path of the picture test object;
loading the picture test object according to the test path;
if the loading is successful, saving the picture path of the visible bit map element;
if the loading fails, changing the picture path of the visual occupation bitmap element into the occupation map path of the visual occupation bitmap element.
According to the display device of the page picture, the visual occupied bitmap element positioned in the current visual area in the page is determined; acquiring screen multiplying power and the logic resolution of visible occupied bitmap elements; calculating the display resolution of the page picture corresponding to the visible occupied bitmap element according to the logic resolution and the screen magnification; modifying the picture path of the visible bitmap element based on the display resolution to carry out loading display on the page picture, so that the larger the screen is, the more the left blank is; the technical problem of poor definition of the pictures is solved, and the display resolution of the page pictures at each terminal is calculated according to the screen magnification of the terminal, so that each terminal can obtain the optimal display effect.
Fig. 5 shows an exemplary system architecture 500 of a display method of a page picture or a display apparatus of a page picture to which an embodiment of the present invention can be applied.
As shown in fig. 5, the system architecture 500 may include terminal devices 501, 502, 503, a network 504, and a server 505. The network 504 serves to provide a medium for communication links between the terminal devices 501, 502, 503 and the server 505. Network 504 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
The user may use the terminal devices 501, 502, 503 to interact with a server 505 over a network 504 to receive or send messages or the like. The terminal devices 501, 502, 503 may have various communication client applications installed thereon, such as a shopping application, a web browser application, a search application, an instant messaging tool, a mailbox client, social platform software, and the like.
The terminal devices 501, 502, 503 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.
The server 505 may be a server that provides various services, such as a background management server that supports shopping websites browsed by users using the terminal devices 501, 502, 503. The background management server may analyze and perform other processing on the received data such as the product information query request, and feed back a processing result (e.g., target push information and product information) to the terminal device.
It should be noted that the method for displaying the page picture provided by the embodiment of the present invention is generally executed by the server 505, and accordingly, the display device for the page picture is generally disposed in the server 505.
It should be understood that the number of terminal devices, networks, and servers in fig. 5 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Referring now to FIG. 6, a block diagram of a computer system 600 suitable for use with a terminal device implementing an embodiment of the invention is shown. The terminal device shown in fig. 6 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.
As shown in fig. 6, the computer system 600 includes a Central Processing Unit (CPU)601 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage section 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data necessary for the operation of the system 600 are also stored. The CPU 601, ROM 602, and RAM 603 are connected to each other via a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.
The following components are connected to the I/O interface 605: an input portion 606 including a keyboard, a mouse, and the like; an output portion 607 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The driver 610 is also connected to the I/O interface 605 as needed. A removable medium 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 610 as necessary, so that a computer program read out therefrom is mounted in the storage section 608 as necessary.
In particular, according to the embodiments of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 609, and/or installed from the removable medium 611. The computer program performs the above-described functions defined in the system of the present invention when executed by the Central Processing Unit (CPU) 601.
It should be noted that the computer readable medium shown in the present invention can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present invention, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules described in the embodiments of the present invention may be implemented by software or hardware. The described modules may also be provided in a processor, which may be described as: a processor includes a determination module, an acquisition module, a calculation module, and a modification module. The names of these modules do not constitute a limitation to the module itself in some cases, and for example, the acquiring module may also be described as a "module that acquires the logical resolution and screen magnification of the visible occupancy bitmap element".
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be separate and not incorporated into the device. The computer readable medium carries one or more programs which, when executed by a device, cause the device to comprise: step S101: determining a visual occupying bitmap element positioned in a current visual area in a page; step S102: acquiring the logic resolution and screen magnification of the visible bitmap element; step S103: calculating the display resolution of the page picture corresponding to the visible occupied bitmap element according to the logic resolution and the screen magnification; step S104: and modifying the picture path of the visual occupied bitmap element based on the display resolution so as to load and display the page picture.
According to the technical scheme of the embodiment of the invention, the visual occupied bitmap element positioned in the current visual area in the page is determined; acquiring screen multiplying power and the logic resolution of visible occupied bitmap elements; calculating the display resolution of the page picture corresponding to the visible occupied bitmap element according to the logic resolution and the screen magnification; modifying the picture path of the visible bitmap element based on the display resolution to carry out loading display on the page picture, so that the larger the screen is, the more the left blank is; the technical problem of poor definition of the pictures is solved, and the display resolution of the page pictures at each terminal is calculated according to the screen magnification of the terminal, so that each terminal can obtain the optimal display effect.
The above-described embodiments should not be construed as limiting the scope of the invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions can occur, depending on design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (12)
1. A method for displaying a page picture is characterized by comprising the following steps:
determining a visual occupying bitmap element positioned in a current visual area in a page;
acquiring the logic resolution and screen magnification of the visual occupied bitmap element;
calculating the display resolution of the page picture corresponding to the visual occupied bitmap element according to the logic resolution and the screen magnification;
and modifying the picture path of the visual occupied bitmap element based on the display resolution so as to load and display the page picture.
2. The method of claim 1, wherein determining the visible occupancy bitmap element in the page that is in the current visible region comprises:
acquiring placeholder pixels in a page, and setting picture tags of the placeholder pixels; wherein the picture tag comprises a placeholder map path and a picture path;
acquiring the visible area upper margin and the visible area height of the current visible area in the page, and calculating the visible area lower margin of the current visible area based on the visible area upper margin and the visible area height;
acquiring the upper edge distance of the pixel of the occupied bitmap element with the picture path being a non-null value;
and screening out the visual occupied bitmap element positioned in the current visual area based on the primitive element upper edge distance, the visual area upper edge distance and the visual area lower edge distance.
3. The method of claim 2, wherein the logical resolution comprises a logical pixel width and a logical pixel height, wherein the display resolution comprises a display pixel width and a display pixel height, and wherein
Calculating the display resolution of the page picture corresponding to the visual occupied bitmap element according to the logic resolution and the screen magnification, wherein the calculation comprises the following steps:
acquiring a page picture corresponding to the visual placeholder element according to the picture path of the visual placeholder bitmap element;
multiplying the logic pixel width by the screen multiplying power to obtain the display pixel width of the page picture;
and multiplying the logic pixel height by the screen multiplying power to obtain the display pixel height of the page picture.
4. The method of claim 3, wherein modifying the picture path of the visual occupancy bitmap element based on the display resolution comprises:
determining a size position of a picture path of the visual occupancy bitmap element;
modifying a value of the dimension location based on the display pixel width and the display pixel height.
5. The method of claim 3, further comprising, after modifying the picture path of the visible occupancy bitmap element based on the display resolution:
generating a picture test object, and setting a picture path of the visual occupation bitmap element as a test path of the picture test object;
loading the picture test object according to the test path;
if the loading is successful, saving the picture path of the visible bit map element;
if the loading fails, changing the picture path of the visual occupation bitmap element into the occupation map path of the visual occupation bitmap element.
6. A device for displaying a page picture, comprising:
the determining module is used for determining the visible occupied bitmap element positioned in the current visible area in the page;
the acquisition module is used for acquiring the logic resolution and the screen magnification of the visual bitmap element;
the calculation module is used for calculating the display resolution of the page picture corresponding to the visual occupation bitmap element according to the logic resolution and the screen magnification;
and the modification module is used for modifying the picture path of the visual occupied bitmap element based on the display resolution so as to load and display the page picture.
7. The display device of claim 6, wherein the determination module is further configured to:
acquiring placeholder pixels in a page, and setting picture tags of the placeholder pixels; wherein the picture tag comprises a placeholder map path and a picture path;
acquiring the visible area upper margin and the visible area height of the current visible area in the page, and calculating the visible area lower margin of the current visible area based on the visible area upper margin and the visible area height;
acquiring the upper edge distance of the pixel of the occupied bitmap element with the picture path being a non-null value;
and screening out the visual occupied bitmap element positioned in the current visual area based on the primitive element upper edge distance, the visual area upper edge distance and the visual area lower edge distance.
8. The display device of claim 7, wherein the logical resolution comprises a logical pixel width and a logical pixel height, wherein the display resolution comprises a display pixel width and a display pixel height, and wherein
The calculation module is further to:
acquiring a page picture corresponding to the visual placeholder element according to the picture path of the visual placeholder bitmap element;
multiplying the logic pixel width by the screen multiplying power to obtain the display pixel width of the page picture;
and multiplying the logic pixel height by the screen multiplying power to obtain the display pixel height of the page picture.
9. The display device of claim 8, wherein the modification module is further configured to:
determining a size position of a picture path of the visual occupancy bitmap element;
modifying a value of the dimension location based on the display pixel width and the display pixel height.
10. The display device of claim 8, further comprising a testing module to:
generating a picture test object, and setting a picture path of the visual occupation bitmap element as a test path of the picture test object;
loading the picture test object according to the test path;
if the loading is successful, saving the picture path of the visible bit map element;
if the loading fails, changing the picture path of the visual occupation bitmap element into the occupation map path of the visual occupation bitmap element.
11. An electronic device for displaying page pictures, comprising:
one or more processors;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-5.
12. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out the method according to any one of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911235026.3A CN113032696A (en) | 2019-12-05 | 2019-12-05 | Display method and display device of page picture |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911235026.3A CN113032696A (en) | 2019-12-05 | 2019-12-05 | Display method and display device of page picture |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113032696A true CN113032696A (en) | 2021-06-25 |
Family
ID=76450728
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911235026.3A Pending CN113032696A (en) | 2019-12-05 | 2019-12-05 | Display method and display device of page picture |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113032696A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113190202A (en) * | 2021-05-25 | 2021-07-30 | 海信视像科技股份有限公司 | Data display method and display equipment |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020112082A1 (en) * | 2000-12-07 | 2002-08-15 | Ko John D. | System and method for delivery of documents over a computer network |
| CN1402572A (en) * | 2001-08-23 | 2003-03-12 | 华为技术有限公司 | Method for implementing static picture display adaptation in mobile terminal |
| US20110221766A1 (en) * | 2010-03-09 | 2011-09-15 | Designmade Co., Ltd. | Method for printing a captured screen of web pages |
| CN105204152A (en) * | 2011-09-09 | 2015-12-30 | 文塔纳医疗系统公司 | Imaging systems, cassettes, and methods of using the same |
| CN107818008A (en) * | 2017-11-21 | 2018-03-20 | 武汉斗鱼网络科技有限公司 | page loading method and device |
| CN109086374A (en) * | 2018-07-23 | 2018-12-25 | 北京达佳互联信息技术有限公司 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
| CN110147230A (en) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | Page adaptation method, apparatus, equipment and storage medium |
-
2019
- 2019-12-05 CN CN201911235026.3A patent/CN113032696A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020112082A1 (en) * | 2000-12-07 | 2002-08-15 | Ko John D. | System and method for delivery of documents over a computer network |
| CN1402572A (en) * | 2001-08-23 | 2003-03-12 | 华为技术有限公司 | Method for implementing static picture display adaptation in mobile terminal |
| US20110221766A1 (en) * | 2010-03-09 | 2011-09-15 | Designmade Co., Ltd. | Method for printing a captured screen of web pages |
| CN105204152A (en) * | 2011-09-09 | 2015-12-30 | 文塔纳医疗系统公司 | Imaging systems, cassettes, and methods of using the same |
| CN107818008A (en) * | 2017-11-21 | 2018-03-20 | 武汉斗鱼网络科技有限公司 | page loading method and device |
| CN109086374A (en) * | 2018-07-23 | 2018-12-25 | 北京达佳互联信息技术有限公司 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
| CN110147230A (en) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | Page adaptation method, apparatus, equipment and storage medium |
Non-Patent Citations (3)
| Title |
|---|
| MASATOSHI NISHIMURA; TSUNEO KAGAWA; HIROAKI NISHINO; KOUICHI UTSUMIYA: "A Document Browser Based on a Book-Style Interface with Augmented Reality", IEEE, 19 September 2013 (2013-09-19) * |
| 冯兴利;洪丹丹;罗军锋;锁志海;: "视频自适应技术在网页设计中的实现", 现代电子技术, no. 24, 15 December 2016 (2016-12-15) * |
| 吴瑕;唐权;: "利用Javascript DOM创建并优化网页图片库", 四川职业技术学院学报, no. 06, 15 December 2015 (2015-12-15) * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113190202A (en) * | 2021-05-25 | 2021-07-30 | 海信视像科技股份有限公司 | Data display method and display equipment |
| CN113190202B (en) * | 2021-05-25 | 2023-01-06 | Vidaa(荷兰)国际控股有限公司 | Data display method and display equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109992406B (en) | Picture request method, picture request response method and client | |
| CN113808231B (en) | Information processing method and device, image rendering method and device, and electronic device | |
| CN107256259B (en) | Page display method and device, electronic equipment and storage medium | |
| CN107656911B (en) | Form processing method and system | |
| CN113138827B (en) | Method, device, electronic equipment and medium for displaying data | |
| CN110598140A (en) | Page adjusting method and device and server | |
| CN107330087B (en) | Page file generation method and device | |
| CN105808307B (en) | Page display method and device | |
| CN111294395A (en) | Terminal page transmission method, device, medium and electronic equipment | |
| CN110675465A (en) | Method and apparatus for generating image | |
| CN113626113B (en) | Page rendering method and device | |
| CN111581553B (en) | Network image display method, system, electronic equipment and storage medium | |
| CN112965650A (en) | Thermodynamic diagram visualization method and system and computer equipment | |
| CN103577496B (en) | A kind of display methods and device of Email | |
| CN110807162A (en) | Method and device for loading occupation bitmap | |
| US11438403B2 (en) | Page presentation method and system, computer system, and computer readable medium | |
| CN112445394B (en) | Screenshot method and screenshot device | |
| CN109635263A (en) | The fixed methods of exhibiting of col width based on WEB ultra-wide table, device and electronic equipment | |
| CN113032696A (en) | Display method and display device of page picture | |
| CN113282852A (en) | Method and device for editing webpage | |
| CN112486783A (en) | Progress bar display method and device | |
| CN105389308A (en) | Display processing method and device for web pages | |
| CN109710783B (en) | Picture loading method and device, storage medium and server | |
| CN110020320A (en) | The method and apparatus for caching page pictures | |
| US20140195894A1 (en) | Method and system for continuous rendering of web content |
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 |