CN113032696A - Display method and display device of page picture - Google Patents

Abstract

The invention discloses a display method and display device of a page picture, and relates to the technical field of computers. A specific implementation of the method includes: determining the visual placeholder map element located in the current visible area in the page; obtaining the screen magnification and the logical resolution of the visual placeholder map element; Display resolution of the page image corresponding to the placeholder image element; modify the image path of the visible placeholder image element based on the display resolution to load and display the page image. In this embodiment, the display resolution of the page picture on each terminal can be calculated according to the screen magnification of the terminal, so that each terminal can obtain the best display effect.

Description

A display method and display device of a page picture

technical field

The present invention relates to the technical field of computers, and in particular, to a method and a display device for displaying page pictures.

Background technique

When loading image elements on web pages, there are generally two methods currently adopted by terminal browsers. One is to solidify the width and height of the image elements. No matter how big the screen is, the size and aspect ratio of the image elements remain unchanged; the other is to solidify the width and height of the image elements. One is to use one image size to fit multiple different screen sizes.

In the process of realizing the present invention, the inventor found that there are at least the following problems in the prior art:

The larger the screen, the more white space is left; the picture is less sharp.

SUMMARY OF THE INVENTION

In view of this, embodiments of the present invention provide a method and a display device for displaying page pictures, which can calculate the display resolution of page pictures on each terminal according to the screen magnification of the terminal, so that each terminal can obtain the best display effect.

To achieve the above object, according to an aspect of the embodiments of the present invention, a method for displaying page pictures is provided.

A method for displaying page pictures according to an embodiment of the present invention includes:

Determine the visual placeholder element on the page that is located in the current visual area;

obtaining the logical resolution and screen magnification of the visual placeholder element;

Calculate the display resolution of the page picture corresponding to the visible placeholder element according to the logical resolution and the screen magnification;

Modify the picture path of the visible placeholder map element based on the display resolution, so as to load and display the page picture.

Optionally, determine the visual placeholder elements on the page that are located in the current viewable area, including:

Obtain a placeholder map element in the page, and set a picture label of the placeholder map element; wherein, the picture label includes a placeholder map path and a picture path;

Obtain the upper margin of the visible area and the height of the visible area of the current visible area in the page, and calculate the lower margin of the visible area of the current visible area based on the upper margin of the visible area and the height of the visible area ;

obtaining the top margin of the image element of the placeholder image element whose image path is a non-null value;

Based on the top margin of the graphic element, the top margin of the viewable area, and the bottom margin of the viewable area, the visual placeholder map elements located in the current viewable area are filtered out.

Optionally, the logical resolution includes a logical pixel width and a logical pixel height, the display resolution includes a display pixel width and a display pixel height, and

Calculate the display resolution of the page picture corresponding to the visible placeholder element according to the logical resolution and the screen magnification, including:

Obtain the page picture corresponding to the visual placeholder map element according to the image path of the visual placeholder map element;

multiplying the logical pixel width by the screen magnification to obtain the display pixel width of the page picture;

Multiply the logical pixel height by the screen magnification to obtain the display pixel height of the page picture.

Optionally, modifying the picture path of the visual placeholder map element based on the display resolution includes:

determining the size and position of the image path of the visual placeholder element;

The value of the size location is modified based on the display pixel width and the display pixel height.

Optionally, after modifying the picture path of the visual placeholder map element based on the display resolution, the method further includes:

generating a picture test object, and setting the picture path of the visible placeholder image element as the test path of the picture test object;

Load the picture test object according to the test path;

If the loading is successful, save the image path of the visual placeholder element;

If the loading fails, the picture path of the visual placeholder map element is changed to the placeholder map path of the visual placeholder map element.

To achieve the above object, according to yet another aspect of the embodiments of the present invention, a device for displaying page pictures is provided.

A device for displaying page pictures according to an embodiment of the present invention includes:

A determination module, which is used to determine the visual placeholder element in the current visible area of the page;

an acquisition module for acquiring the logical resolution and screen magnification of the visual placeholder element;

a calculation module, configured to calculate the display resolution of the page picture corresponding to the visible placeholder map element according to the logical resolution and the screen magnification;

A modification module, configured to modify the picture path of the visible placeholder map element based on the display resolution, so as to load and display the page picture.

Optionally, the determining module is also used for:

Obtain a placeholder map element in the page, and set a picture label of the placeholder map element; wherein, the picture label includes a placeholder map path and a picture path;

Obtain the upper margin of the visible area and the height of the visible area of the current visible area in the page, and calculate the lower margin of the visible area of the current visible area based on the upper margin of the visible area and the height of the visible area ;

obtaining the top margin of the image element of the placeholder image element whose image path is a non-null value;

Based on the top margin of the graphic element, the top margin of the viewable area, and the bottom margin of the viewable area, the visual placeholder map elements located in the current viewable area are filtered out.

Optionally, the logical resolution includes a logical pixel width and a logical pixel height, the display resolution includes a display pixel width and a display pixel height, and

The computing module is also used for:

Obtain the page picture corresponding to the visual placeholder map element according to the image path of the visual placeholder map element;

multiplying the logical pixel width by the screen magnification to obtain the display pixel width of the page picture;

Multiply the logical pixel height by the screen magnification to obtain the display pixel height of the page picture.

Optionally, the modification module is also used for:

determining the size and position of the image path of the visual placeholder element;

The value of the size location is modified based on the display pixel width and the display pixel height.

Optionally, the display device further includes a test module for:

generating a picture test object, and setting the picture path of the visible placeholder image element as the test path of the picture test object;

Load the picture test object according to the test path;

If the loading is successful, save the image path of the visual placeholder element;

If the loading fails, the picture path of the visual placeholder map element is changed to the placeholder map path of the visual placeholder map element.

To achieve the above object, according to another aspect of the embodiments of the present invention, an electronic device for displaying page pictures is provided.

An electronic device for displaying page pictures according to an embodiment of the present invention includes: one or more processors; and a storage device for storing one or more programs, when the one or more programs are processed by the one or more programs The one or more processors implement the method for displaying a page picture according to the embodiment of the present invention.

To achieve the above object, according to yet another aspect of the embodiments of the present invention, a computer-readable storage medium is provided.

A computer-readable storage medium according to an embodiment of the present invention stores a computer program thereon, and when the program is executed by a processor, a method for displaying a page picture according to an embodiment of the present invention is implemented.

One embodiment of the above invention has the following advantages or beneficial effects: because the visual placeholder map element located in the current visible area in the page is determined; the screen magnification and the logical resolution of the visual placeholder map element are obtained; according to the logical resolution Calculate the display resolution of the page image corresponding to the visual placeholder element based on the display resolution and screen magnification; modify the image path of the visual placeholder element based on the display resolution to load and display the page image, so it overcomes the problem of the screen. The larger the size, the more blanks are left; the technical problem of poor picture definition, and then the display resolution of the page picture on each terminal can be calculated according to the screen magnification of the terminal, so that each terminal can get the best display The technical effect of the effect.

Further effects of the above non-conventional alternatives will be described below in conjunction with specific embodiments.

Description of drawings

The accompanying drawings are used for better understanding of the present invention and do not constitute an improper limitation of the present invention. in:

1 is a schematic diagram of main steps of a method for displaying page pictures according to an embodiment of the present invention;

2 is a schematic diagram of an implementation framework of a method for displaying page pictures according to an embodiment of the present invention;

3 is a schematic diagram of the main flow of a method for displaying page pictures according to a referenced embodiment of the present invention;

4 is a schematic diagram of main modules of a display device for a page picture according to an embodiment of the present invention;

5 is an exemplary system architecture diagram to which an embodiment of the present invention may be applied;

FIG. 6 is a schematic structural diagram of a computer system suitable for implementing a terminal device or a server according to an embodiment of the present invention.

Detailed ways

Exemplary embodiments of the present invention are described below with reference to the accompanying drawings, which include various details of the embodiments of the present invention to facilitate understanding and should be considered as exemplary only. 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 from the following description for clarity and conciseness.

It should be pointed out that the embodiments of the present invention and the technical features in the embodiments may be combined with each other without conflict.

The pictures are adapted to different terminals. Two processing methods commonly used in the prior art are as follows:

One is to solidify the width and height of the picture element. No matter how big the screen is, the size and aspect ratio of the picture element remains unchanged. The aspect ratio of the image is 240x240px, then the image is rendered with an aspect ratio of 120x120 px on a screen of 320x568 px, 360x640 px, 375x667 px or 414x736 px, etc. For terminals such as mobile phones, the screen size is small, and the reasonable utilization of each position of the screen needs to be considered. If rendering is performed in this way, the aspect ratio of the picture element is usually set to be smaller, so the larger the screen is. The more white space is left;

The other is to use one image size to adapt to different screen sizes. For example, the aspect ratio of the original image is 750x200px, and the image is in a screen of 320x568 px, 360x640 px, 375x667 px, 414x736 px, etc., after rendering The aspect ratios are 320x85.33px, 360x96px, 375x100px, 414x110.39px. If the rendering is performed in this way, although the picture can be adapted to different screen sizes, but only a fixed picture size is used, the problem of picture stretching or picture compression will occur, and there will be a certain resource loss, resulting in the clear picture. Decreased (blurred).

In order to solve the blanking problem of fixed adaptation, and at the same time solve the blurring problem caused by compression and stretching when the picture is adapted to various browsers, the display method of the page picture according to the embodiment of the present invention proposes that the logic rendered by the placeholder image is used. The resolution combines the screen magnification of each terminal to calculate the optimal image size required for each terminal to have the best display effect, and distinguish the page images of different sizes through the image path, and obtain the correct size page when loading picture.

FIG. 1 is a schematic diagram of main steps of a method for displaying page pictures according to an embodiment of the present invention.

As shown in FIG. 1 , the method for displaying page pictures according to the embodiment of the present invention mainly includes the following steps:

Step S101: Determine the visual placeholder map element located in the current visible area in the page.

Usually, the size of the 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 the display area on the page that can be directly seen by the user is called the current viewable area. A placeholder element is an element used to form a page rendering image. The page containing the image will set a placeholder element at the position where the image is displayed. When the user accesses the page, the lazy loading method is used, that is, in the loaded page, The visual placeholder element located in the current visual area will load the actual page image, and the placeholder map element that is not in the current visual area will load an alternative placeholder image. When the user scrolls the page, the placeholder image that was originally located in the non-visual area will be loaded. After the element enters the current visible area, the actual corresponding page image is loaded. The lazy loading method can prepare for the image adaptation of multiple terminal sizes; it can also quickly prop up the page, give users the fastest visual feedback, and reduce the loading of some image resources that are not in the current visual area, reducing user traffic loss. .

In this embodiment of the present invention, step S101 may be implemented in the following ways: initialize the page; obtain a placeholder image element in the page, and set the image label of the placeholder image element; obtain the upper margin of the visible area of the current visible area in the page and the height of the visible area, and calculate the lower margin of the visible area of the current visible area based on the upper margin of the visible area and the height of the visible area; get the upper margin of the image element of the placeholder image element whose image path is a non-null value; based on the image Element top margin, viewport top margin, and viewport bottom margin filter out the visual placeholder elements that are located in the current viewport.

The image tag includes a placeholder image path and an image path, where the placeholder image path is the loading path of the placeholder image, and the image path is the loading path of the page image. When a user accesses a page through a browser, etc., the DOM loading, CSS loading, JavaScript loading, etc. of the page will be performed first; then the images in the page will be loaded with the default image (that is, the preset placeholder image) first in a lazy loading manner, that is Before the actual image loading of the placeholder image element is completed, a fixed placeholder image will be used to replace the actual page image that needs to be displayed. Therefore, the placeholder image path and image path should be set for each placeholder image element. In addition, if If it is necessary to not display the page image on the page, you can set the loading path to be empty; when loading the page image, you must first determine the visual placeholder element located in the current visible area. In the browser environment (JavaScript), "document.body.scrollTop" is used to obtain the size of the top of the current viewable area from the top, which is called the top margin of the viewable area; then "document.documentElement.clientHeight" is used to obtain the current viewable area. The height of the visible area; in this way, the lower margin of the visible area can be calculated using the above two data; finally, the upper margin of the image element of the placeholder image element is obtained, and the upper margin of the image element is the difference between the upper margin of the visible area and the lower margin of the visible area A placeholder map element with a specific value in the image path is a visual placeholder map element.

Step S102: Obtain the logical resolution and screen magnification of the visual placeholder element.

Screen resolution refers to the resolution of the screen display. Screen Resolution A setting that determines how much information is displayed on a computer screen, measured in horizontal and vertical pixels, for a screen of the same size, when the screen resolution is low (e.g. 640x480), fewer pixels are displayed on the screen, a single pixel The size is relatively large. When the screen resolution is high (for example, 1600x1200), there are many pixels displayed on the screen, and the size of a single pixel is relatively small.

Logical resolution: it can be achieved by browsers or software, and it is also css pixels; the area of 1px and 1px size on the mobile phone is displayed by the display components on the screen, and several will be used, which may be 1, 4 or 9 The number depends on the screen, and the logical resolution refers to the number of these smallest display elements.

The screen ratio is the ratio between the screen resolution and the logical resolution. As a preferred implementation, it can be obtained through "window.devicePixelRatio" in JavaScript.

After the visual placeholder elements are filtered out, the logical resolution on the screen corresponding to the area where the page image needs to be loaded is obtained, and the screen magnification of the terminal is obtained at the same time to further calculate the screen resolution of the area.

Step S103: Calculate the display resolution of the page picture corresponding to the visible placeholder element according to the logical resolution and the screen magnification.

Since the screen magnification is the comparison value between the screen resolution and the logical resolution, after obtaining the screen magnification and the logical resolution of the visual placeholder element, the screen resolution corresponding to the visual placeholder element can be calculated. The resolution is the display resolution that enables the page picture to achieve the best display effect on a terminal.

In this embodiment of the present invention, step S103 may be implemented in the following manner: obtaining a page image corresponding to the visible placeholder map element according to the image path of the visible placeholder map element; multiplying the logical pixel width by the screen magnification to obtain the page image Display pixel width; multiply the logical pixel height by the screen magnification to get the display pixel height of the page image.

The logical resolution includes the logical pixel width and the logical pixel height, and the display resolution includes the display pixel width and the display pixel height. When calculating, multiply the logical pixel width and logical pixel height by the screen magnification, respectively, to obtain the display pixel width and display pixel height.

Step S104: Modify the picture path of the visible placeholder image element based on the display resolution, so as to load and display the page picture.

The image path of the page image is used to indicate the storage location of the page image, and it is also the path to call the page image. Through the image path, different sizes of the same page image can be distinguished, so that each terminal corresponding to the same page image has a corresponding size. image path.

In this embodiment of the present invention, the step of modifying the picture path of the visual placeholder map element based on the display resolution may be implemented in the following manner: determining the size and position of the picture path of the visual placeholder map element; High to modify the value of the dimension position.

There is a size position in the picture path that controls 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 combined calling page picture is reset.

The method for displaying page pictures according to the embodiment of the present invention may further include: generating a picture test object, setting the picture path of the visible placeholder image element as the test path of the picture test object; loading the picture test object according to the test path; if the loading is successful, Then save the image path of the visual placeholder element; if the loading fails, change the image path of the visual placeholder element to the placeholder path of the visual placeholder element.

After obtaining and setting the size of the page picture through steps S101 to S104, the page picture can be tested, that is, a new picture test object is generated, and the picture path obtained in step S104 is used as the test path of the picture test object, according to the test path Load the image test object. If the loading is successful, it means that the image path can be used, and the image path can be fixed as the image path of the page image; if the loading fails, it means that the image path is unavailable. In order to ensure the overall display effect of the page, A placeholder map can be used for an alternative display. The placeholder map path is the storage location of the placeholder map, and is also the path for calling the placeholder map.

According to the method for displaying page pictures according to the embodiment of the present invention, it can be seen that, because the visual placeholder map element located in the current visible area in the page is determined; the screen magnification and the logical resolution of the visual placeholder map element are obtained; according to the logic The resolution and screen magnification calculate the display resolution of the page image corresponding to the visual placeholder element; based on the display resolution, the image path of the visual placeholder element is modified to load and display the page image, so it overcomes the The larger the screen, the more blanks are left; the technical problem of poor picture definition, and then the display resolution of the page picture in each terminal can be calculated according to the screen magnification of the terminal, so that each terminal can get the best results. Display the technical effect of the effect.

In order to further illustrate the technical idea of the present invention, the technical solutions of the present invention are now described with reference to specific application scenarios.

As shown in FIG. 2 , the method for displaying page pictures in the application of the embodiment of the present invention mainly includes three parts: acquiring data parameters, parameter setting and data display, wherein:

1. To obtain data, it is necessary to obtain the placeholder map element of the current visible area, obtain the corresponding logical pixel width and height (ie logical resolution) through the placeholder map element, and then combine the screen magnification to calculate the current placeholder map element. The actual picture width and height (ie display resolution) required for the area.

2. Parameter setting, mainly in combination with the first step to obtain the actual required picture aspect ratio to adjust the picture address, by setting the path of the picture src (that is, the picture path), so that each corresponding terminal has a corresponding size picture src path, and then dynamically generate an image object, and set the _src attribute of the image object to the path of the image src.

3. Data display, load the image object, if the loading is successful, set the path of the image src to the image path of the placeholder image element to display the page, if the loading fails, reset the src address of the image to the placeholder image address, and re- load.

As shown in FIG. 3 , when applying the method for displaying page pictures according to the embodiment of the present invention, the following process may be referred to:

First, the page is initialized and loaded. When the user accesses the page through the browser, the DOM loading, CSS loading, JavaScript loading, etc. of the page will be performed. After the above resources are loaded, the default image (ie, placeholder image) will be loaded first in a lazy-loading manner. , that is, the way to deal with the placeholder image element is to dynamically add an image tag (ie img tag), and set the src attribute and _src attribute of the img tag, where the value of the src attribute is set to the placeholder image path, and the value of the _src attribute Set to the actual image path;

Secondly, when the page is loaded, stay on the current page (ie, the current visible area), and pass document.body.scrollTop in JavaScript. The scrollTop is the height of the part of the "content in the element" that exceeds the "upper border of the element". Here it can be understood as the height of the part of the page scrolled up, which is defined as the upper margin domT of the visible area of the current visible area; then through document.documentElement.clientHeight, clientHeight is the height of the visible area of the current visible area, that is, the page The height of the area where the content can be seen in the browser; in this way, the lower margin domL of the visible area of the current visible area can be calculated through the above two data;

Again, get the placeholder map element with the _src attribute on the page, and get the top margin elemH of the map element of the placeholder map element. If elemH is between domT and domL, then the current placeholder map element is located in the current visible area;

Then, loop through the placeholder map elements in the current visible area, and obtain the logical pixel width and logical pixel height corresponding to the visual placeholder map element; at the same time, obtain the magnification of the screen, window.devicePixelRatio, which is the value on the terminal. The ratio of physical pixels and logical pixels, we define this value as the variable pr; and then multiply the pr value by the logical pixel width and logical pixel height to obtain the page image corresponding to each visual placeholder element on the terminal. The actual pixel size of the picture required for the best display effect (ie display resolution);

After that, set the actual desired image path, such as the value of the original _src attribute: https://img14.360buyimg.com/n2/s240x240_jfs/t1/4009/18/6575/309253/5ba36753E716b41a3/ed3f22f1981a8908.jpg! q70.jpg, the position of 240x240 is the size position, which is used to control the actual size of the picture, and the path is reset and combined with the actual pixel size of the picture calculated in the previous step;

Finally, generate an image test object (image), and use the image address set in the previous step as the _src attribute for the image, and then send a request for an image resource (that is, load the image); if the image is loaded successfully, the success event will be triggered , in the callback function of the success event, you can assign the image address to the current placeholder element (that is, the visual placeholder element) to realize the adaptive display of the page image; if the image fails to load, the onerror event will be triggered. In the callback function of the onerror event, you can reset the _src address of the current placeholder element to the placeholder address.

FIG. 4 is a schematic diagram of main modules of a display device for a page picture according to an embodiment of the present invention.

As shown in FIG. 4 , the apparatus 400 for displaying 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 .

in,

A determination module 401, configured to determine a visual placeholder element located in the current visible area in the page;

an obtaining module 402, configured to obtain the logical resolution and screen magnification of the visual placeholder element;

A calculation module 403, configured to calculate the display resolution of the page picture corresponding to the visible placeholder map element according to the logical resolution and the screen magnification;

The modification module 404 is configured to modify the picture path of the visible placeholder map 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 also be used to:

Obtain a placeholder map element in the page, and set a picture label of the placeholder map element; wherein, the picture label includes a placeholder map path and a picture path;

Obtain the upper margin of the visible area and the height of the visible area of the current visible area in the page, and calculate the lower margin of the visible area of the current visible area based on the upper margin of the visible area and the height of the visible area ;

obtaining the top margin of the image element of the placeholder image element whose image path is a non-null value;

Based on the top margin of the graphic element, the top margin of the viewable area, and the bottom margin of the viewable area, the visual placeholder map elements located in the current viewable area are filtered out.

In addition, 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 computing module 403 may also be used for:

Obtain the page picture corresponding to the visual placeholder map element according to the image path of the visual placeholder map element;

multiplying the logical pixel width by the screen magnification to obtain the display pixel width of the page picture;

Multiply the logical pixel height by the screen magnification to obtain the display pixel height of the page picture.

In this embodiment of the present invention, the modification module 404 may also be used to:

determining the size and position of the image path of the visual placeholder element;

The value of the size location is modified based on the display pixel width and the display pixel height.

In this embodiment of the present invention, the display device 400 may further include a test module (not shown in the figure) for:

generating a picture test object, and setting the picture path of the visible placeholder image element as the test path of the picture test object;

Load the picture test object according to the test path;

If the loading is successful, save the image path of the visual placeholder element;

If the loading fails, the picture path of the visual placeholder map element is changed to the placeholder map path of the visual placeholder map element.

It can be seen from the display device of the page picture according to the embodiment of the present invention, because the visual placeholder map element located in the current visible area in the page is determined; the screen magnification and the logical resolution of the visual placeholder map element are obtained; according to the logic The resolution and screen magnification calculate the display resolution of the page image corresponding to the visual placeholder element; based on the display resolution, the image path of the visual placeholder element is modified to load and display the page image, so it overcomes the The larger the screen, the more blanks are left; the technical problem of poor picture definition, and then the display resolution of the page picture in each terminal can be calculated according to the screen magnification of the terminal, so that each terminal can get the best results. Display the technical effect of the effect.

FIG. 5 shows an exemplary system architecture 500 of a method for displaying a page picture or an apparatus for displaying 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 , and 503 , a network 504 and a server 505 . The network 504 is a medium used to provide a communication link 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, among others.

The user can use the terminal devices 501, 502, 503 to interact with the server 505 through the network 504 to receive or send messages and the like. Various communication client applications may be installed on the terminal devices 501 , 502 and 503 , such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, 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 computers, desktop computers, and the like.

The server 505 may be a server that provides various services, for example, a background management server that provides support for shopping websites browsed by the terminal devices 501 , 502 , and 503 . The background management server can analyze and process the received product information query request and other data, and feed back the processing results (eg, target push information, product information) to the terminal device.

It should be noted that the method for displaying a page picture provided in the embodiment of the present invention is generally performed by the server 505 , and accordingly, a display device for a page picture is generally set in the server 505 .

It should be understood that the numbers of terminal devices, networks and servers in FIG. 5 are only illustrative. There can be any number of terminal devices, networks and servers according to implementation needs.

Referring to FIG. 6 below, it shows a schematic structural diagram of a computer system 600 suitable for implementing a terminal device according to an embodiment of the present invention. The terminal device shown in FIG. 6 is only an example, and should not impose any limitations on the functions and scope of use of the embodiments of the present invention.

As shown in FIG. 6, a computer system 600 includes a central processing unit (CPU) 601, which can be loaded into a random access memory (RAM) 603 according to a program stored in a read only memory (ROM) 602 or a program from a storage section 608 Instead, various appropriate actions and processes are performed. In the RAM 603, various programs and data necessary for the operation of the system 600 are also stored. The CPU 601 , the ROM 602 , and the RAM 603 are connected to each other through 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 section 606 including a keyboard, a mouse, etc.; an output section 607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 608 including a hard disk, etc. ; and a communication section 609 including a network interface card such as a LAN card, a modem, and the like. The communication section 609 performs communication processing via a network such as the Internet. A drive 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, etc., is mounted on the drive 610 as needed so that a computer program read therefrom is installed into the storage section 608 as needed.

In particular, the processes described above with reference to the flowcharts may be implemented as computer software programs in accordance with the disclosed embodiments of the present invention. For example, embodiments disclosed herein include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the method illustrated in the flowchart. In such an embodiment, the computer program may be downloaded and installed from the network via the communication portion 609 and/or installed from the removable medium 611 . When the computer program is executed by the central processing unit (CPU) 601, the above-described functions defined in the system of the present invention are performed.

It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the above two. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or a combination of any of the above. More specific examples of computer readable storage media may include, but are not limited to, electrical connections with one or more wires, portable computer disks, hard disks, random access memory (RAM), read only memory (ROM), erasable Programmable read only memory (EPROM or flash memory), fiber optics, portable compact disk read only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing. In the present invention, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the present invention, however, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code therein. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device . Program code embodied on a computer readable medium may be transmitted using any suitable medium including, but not limited to, wireless, wireline, optical fiber 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 that contains one or more logical functions for implementing the specified functions executable instructions. It should also be noted that, in some alternative implementations, the functions noted in the blocks 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 is also noted that each block of the block diagrams or flowchart illustrations, and combinations of blocks in the block diagrams or flowchart illustrations, can be implemented in special purpose hardware-based systems that perform the specified functions or operations, or can be implemented using A combination of dedicated hardware and computer instructions is implemented.

The modules involved in the embodiments of the present invention may be implemented in a software manner, and may also be implemented in a hardware manner. The described modules can also be provided in the processor, for example, it can be described as: a processor includes a determination module, an acquisition module, a calculation module and a modification module. Among them, the names of these modules do not constitute a limitation of the module itself in some cases, for example, the acquisition module can also be described as "a module for acquiring the logical resolution and screen magnification of the visual placeholder element" .

As another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiments; or may exist alone without being assembled into the device. The above-mentioned computer-readable medium carries one or more programs, and when the above-mentioned one or more programs are executed by a device, the device includes: Step S101: Determine the visual placeholder map element located in the current visible area in the page ; Step S102: obtain the logical resolution and screen magnification of the visual placeholder map element; Step S103: calculate the display resolution of the page picture corresponding to the visual placeholder map element according to the logical resolution and the screen magnification; Step S104: based on the display The resolution modifies the image path of the visual placeholder element to load and display the page image.

According to the technical solution of the embodiment of the present invention, because the visual placeholder map element located in the current visible area in the page is determined; the screen magnification and the logical resolution of the visual placeholder map element are obtained; and the logical resolution and the screen magnification are calculated The display resolution of the page image corresponding to the visual placeholder element; the technical means of modifying the image path of the visual placeholder element based on the display resolution to load and display the page image, so it overcomes the problem that the larger the screen, the more The more blanks appear; the technical problem of poor picture definition, and then the technical effect of calculating the display resolution of page pictures on each terminal according to the screen magnification of the terminal, so that each terminal can obtain the best display effect.

The above-mentioned specific embodiments do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may occur depending on design requirements and other factors. Any modifications, equivalent replacements and improvements made within the spirit and principle of the present invention shall be included within 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.

Images